CSS 为什么我的 div 背景渐变在 IE9 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5897554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't my div background gradient working in IE9
提问by Sledge81
i've been breaking my head on how to get a background for a DIV to work using the background-gradient for IE9. Funny thing is, rest of the DIV's display gradients except this one.
我一直在思考如何使用 IE9 的背景渐变为 DIV 获取背景。有趣的是，除此之外，其余的 DIV 显示渐变。
The code i'm using is:
我正在使用的代码是：
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')
To get a better understanding, I created a div class called leaderboard, which sits on the top right side of the screen, position is fixed.
为了更好的理解，我创建了一个名为leaderboard的div类，它位于屏幕的右上角，位置是固定的。
The rest of the elements in the page having gradients are rendered correctly except this. Am i doing something wrong?
除此以外，页面中具有渐变的其余元素均已正确呈现。难道我做错了什么？
EDIT
编辑
This is how my #respond looks like (which works absolutely fine)
这就是我的 #respond 的样子（效果很好）
#respond {
-moz-box-shadow: 0 0 1px #CCCCCC;
-webkit-box-shadow: 0 0 1px #CCCCCC;
border-top: 1px solid #ECEDE8;
float: left;
margin-left: 10px;
width: 370px;
margin-bottom: 15px;
background: -moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#f2F2F1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
}
This is how the .leaderboard looks like
这是 .leaderboard 的样子
.leaderboard {
border: 1px solid #5D9ABA;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
margin: 375px auto;
background: -moz-linear-gradient(center bottom , #388EBB 0%, #5D9ABA 50%) repeat scroll 0 0 #5D9ABA;
background: -webkit-gradient(linear, left top, left bottom, from(#388EBB), to(#5D9ABA));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
text-color: #EFEFEF;
-moz-box-shadow: -2px 2px 5px 0px #CCCCCC;
-webkit-box-shadow: -2px 2px 5px 0px #CCCCCC;
box-shadow: -2px 2px 5px 0px #CCCCCC;
}
回答by
This works (note my comments for cross-browser support!):
这有效（请注意我对跨浏览器支持的评论！）：
HTML
HTML
<a class="gradient border-radius multiple-background" href="#">Anchor</a>
<div class="gradient border-radius multiple-background">Div</div>
CSS
CSS
a {
display:inline-block; /* NB ie7 ele requires display:block or display:inline-block for gradient to work on anchors */
}
a,
div {
min-height:1%; /* NB ie7 ele requires haslayout for gradient to work */
}
.gradient{
background: #f8cbd6; /* Old browsers */
background: -moz-linear-gradient(top, #f8cbd6 0%, #edeeec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8cbd6), color-stop(100%,#edeeec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Opera11.10+ */
/* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cbd6', endColorstr='#edeeec',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* W3C */
}
/* NOSUPPORT ie7-9 for gradient AND border-radius (border-radius only supported in ie9 anyway) */
PS if you're aiming to combine border-radius, gradients, and multiple background-images (in latest builds as of 03/08/2011) in IE7-9 good luck is all I can say (just spent 5hrs experimenting and documenting use cases!).
PS，如果你的目标是在 IE7-9 中结合边界半径、渐变和多个背景图像（在 03/08/2011 的最新版本中），我只能说祝你好运（只花了 5 小时试验和记录使用情况！）。
I'm about to publish my findings - which are outside the scope of this question - but if anyone reading this needs them drop me a DM/email ([email protected]).
我即将发布我的发现——这超出了这个问题的范围——但如果有人阅读这篇文章需要他们给我发 DM/电子邮件 ([email protected])。
Best,
最好的事物，
回答by robertc
Have you tried:
你有没有尝试过：
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')"; /* for IE */
The quotes are necessary. Also for things to work in all versions of IE, you need to put the -ms-filterbefore the filter.
引号是必要的。也为东西向工作在IE浏览器的所有版本，你需要把-ms-filter之前filter。
回答by curriegrr
IE uses #AARRGGBB format, a 8 digit number. The colors he used are only 6 digits.
IE 使用#AARRGGBB 格式，一个8 位数字。他使用的颜色只有6位数。
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
ref:
参考：
http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx
