CSS 3 градиент не работает на Chrome / Firefox - PullRequest
Новая
       13

CSS 3 градиент не работает на Chrome / Firefox

0 голосов
/ 29 июня 2011 
<html>
<head>
<style type="text/css">
    *{padding:0;margin:0;}
    body{
        background: -webkit-gradient(
            linear,
            right bottom,
            left top,
            color-stop(0.25, #F5A432),
            color-stop(0.63, #F0F050)
        );
        background: -moz-linear-gradient(
            right bottom,
            #F5A432 25%,
            #F0F050 63%
        );
    }

    .box{margin-left: 33px; width:100px; height: 100px; background-color:rgb(69,69,69); border: 1px solid rgb(56,56,56);border-radius: 25px; float:left}
    #container{padding-left: 37%; padding-right: 30%; width: 1000px; background-color: rgb(64,64,64); position:fixed}
</style>
</head>
<body>
    <div id="container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</body>
</html>

Градиент в коде выше не отображается! Просто белый фон. Почему?

Ответы [ 2 ]

5 голосов
/ 29 июня 2011

Единственный элемент внутри body (#container) имеет position: fixed.

Элемент с position: fixed удален из нормального потока, поэтому body не имеет высоты.

Вы можете «исправить» это с помощью: 

html {
    height: 100%
}
body {
    min-height: 100%
}

См .: http://jsbin.com/alucix

1 голос
/ 30 июня 2011

Я протестировал ваш код в Chrome (версия 12.0.742.100), и он работает как положено.

Код Firefox не работает, и это из-за поля: 0; на теле. Об ошибке сообщается @ https://bugzilla.mozilla.org/show_bug.cgi?id=509681.

...