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或gradient支持。到目前为止，我所厌烦的另一件事是文字阴影。

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

Answer 3

关于IE 9+的最佳跨浏览器解决方案，符合W3C standards（不会导致CSS validator中的错误），如下所示：

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-color和background-image而不是background，因为它可能导致浏览器中的渲染错误而没有线性渐变支持。大量复制from my answer for this question。

IE9是否支持CSS线性渐变？

3 个答案: