Question

<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>

上面的代码中没有显示渐变！只是一个纯白色的背景。为什么呢？

Answer 1

body（#container）中唯一的元素有position: fixed。

position: fixed的元素已从正常流中移除，因此body没有高度。

你可以用以下方式“修复”：

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

请参阅： http://jsbin.com/alucix

Answer 2

我在Chrome（版本12.0.742.100）中测试了您的代码，它按预期工作。

Firefox代码不起作用，这是因为保证金：0;身体上。该错误已在@ https://bugzilla.mozilla.org/show_bug.cgi?id=509681报告。

CSS 3渐变不适用于chrome / firefox

2 个答案: