CSS 3 渐变不适用于 chrome/firefox
[英]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 above.
上面的代码中没有显示渐变。 Just a plain white background?只是一个纯白色的背景？ Why?为什么？
2 个解决方案
解决方案1
5 已采纳 2011-06-29 19:58:25
The only element inside body ( #container ) has position: fixed . body唯一的元素（ #container ）有position: fixed 。
An element with position: fixed is removed from normal flow, so the body has no height.带有position: fixed的元素从正常流中移除，因此body没有高度。
You can "fix" this with:您可以通过以下方式“修复”此问题：
html {
height: 100%
}
body {
min-height: 100%
}
解决方案2
1 2011-06-29 20:16:14
I tested your code in Chrome (version 12.0.742.100) and it works as intended.我在 Chrome（版本 12.0.742.100）中测试了您的代码，它按预期工作。
The Firefox code doesn't work and it's because of margin: 0; Firefox 代码不起作用，这是因为 margin: 0; on body.身上。 The bug has been reported @ https://bugzilla.mozilla.org/show_bug.cgi?id=509681 .该错误已报告@ https://bugzilla.mozilla.org/show_bug.cgi?id=509681 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.