IE9 是否支持 CSS 线性渐变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4961651/
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
Does IE9 support CSS linear gradients?
提问by James Alexander
With Chrome/Safari and Firefox there's the -webkit-gradientand -moz-linear-gradientproperties. How can I do this same sort of thing with IE9?
Chrome/Safari 和 Firefox 有-webkit-gradient和-moz-linear-gradient属性。我怎样才能用 IE9 做同样的事情？
采纳答案by Chad Lundgren
Well, IE9 is not done yet, but so far it looks like you're going to have to use SVG. I'm not aware of any -ms-gradient or gradient support in IE9. The other thing that's missing so far that I'm annoyed about is text-shadow.
嗯，IE9 还没有完成，但目前看来您将不得不使用 SVG。我不知道 IE9 中有任何 -ms-gradient 或渐变支持。到目前为止，我很恼火的另一件事是文本阴影。
回答by goksel
The best cross-browser solution is
最好的跨浏览器解决方案是
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
回答by Volker E.
The best cross-browser solution regarding IE 9+, that is conforming to W3C standards(doesn't result in an error in CSS validator) is the following:
关于 IE 9+ 的最佳跨浏览器解决方案符合W3C 标准（不会导致CSS 验证器中的错误）如下：
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
.gradient--test {
background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */
background-image: -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */
background-image: linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
width: 61.8%;
height: 200px;
}<div class=gradient--test></div> IE 9 introduced the vendor prefix -ms-filternotation, that is according to standards, at the same time deprecated the proprietary filters.
IE 9 引入了供应商前缀-ms-filter表示法，即根据标准，同时弃用了专有过滤器。
Neither -o-vendor prefix is necessary, nor -ms-(as IE 10 is the first IE to support gradients and it does support the W3C standards syntax). See http://caniuse.com/#feat=css-gradients
Prefer lowercase hex color values for better gzipping, and clearly state background-colorand background-imageinstead of background, because it could result in rendering errors in browsers without linear gradient support.
Largely copied from my answer for this question.
既不需要-o-供应商前缀，也不需要-ms-（因为 IE 10 是第一个支持渐变的 IE，它确实支持 W3C 标准语法）。请参阅http://caniuse.com/#feat=css-gradients
首选小写十六进制颜色值以获得更好的 gzip 压缩，并明确说明background-color和background-image而不是background，因为它可能导致浏览器中没有线性渐变支持的渲染错误。很大程度上是从我对这个问题的回答中复制的。
