css - IE9 是否支持 CSS 线性渐变？

Question

对于 Chrome/Safari 和 Firefox，有-webkit-gradient和-moz-linear-gradient属性。我怎样才能用 IE9 做同样的事情？

Answer 1

最好的跨浏览器解决方案是

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

Answer 2

好吧，IE9 还没有完成，但到目前为止，您似乎将不得不使用 SVG。我不知道 IE9 中有任何 -ms-gradient 或渐变支持。到目前为止，令我恼火的另一件事是文本阴影。

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

Answer 3

关于 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 引入了供应商前缀-ms-filter符号，即根据标准，同时弃用了专有过滤器。

既不-o-需要供应商前缀，也不需要-ms-（因为 IE 10 是第一个支持渐变的 IE，它确实支持 W3C 标准语法）。请参阅http://caniuse.com/#feat=css-gradients
首选小写十六进制颜色值以获得更好的 gzipping，并清楚地声明background-colorandbackground-image而不是background，因为它可能导致在没有线性渐变支持的浏览器中呈现错误。很大程度上是从我对这个问题的回答中复制而来的。