CSS 3 gradient not working on chrome/firefox
<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>
No gradient is showing in the code abo开发者_开发问答ve! Just a plain white background. Why?
The only element inside body (#container) has position: fixed.
An element with position: fixed is removed from normal flow, so the body has no height.
You can "fix" this with:
html {
height: 100%
}
body {
min-height: 100%
}
See: http://jsbin.com/alucix
I tested your code in Chrome (version 12.0.742.100) and it works as intended.
The Firefox code doesn't work and it's because of margin: 0; on body. The bug has been reported @ https://bugzilla.mozilla.org/show_bug.cgi?id=509681.
加载中,请稍侯......
精彩评论