IE9支持CSS线性渐变吗？

Question

在Chrome/Safari和Firefox中，可以使用-webkit-gradient和-moz-linear-gradient属性。如何在IE9中进行类似的操作？

- James Alexander

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

- goksel

---

据我所知，在IE9中，该滤镜会溢出边框半径（圆角）... - Oskar Duveborn

这个解决方案正如奥斯卡所说的那样溢出了边框半径...你们有没有什么解决方法可以避免在IE 9中出现这种情况？谢谢。 - Ravi

我不得不关闭过滤器。边框半径溢出太丑了。 - courtsimas

如何在IE9中删除ActiveX脚本？ - crh225

Answer 2

嗯，IE9还没有完成，但到目前为止，看来你需要使用SVG。我不知道IE9中是否支持-ms-gradient或梯度。另一个让我感到困扰的缺失是text-shadow。

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

- Chad Lundgren

---

即使使用最新和最好的RC版本？根据RC标识，可以安全地假设text-shadow和image gradients不会进入发布版吗？ - James Alexander

更新：我已经尝试了IE9 RC1，它不支持CSS3渐变。它仍然支持专有的MS渐变语法，但这些非常简单，只能有一个起始和结束颜色，因此在我的书中它们并不等效。它还忽略了text-shadow。有人在IE9 Twitter上问过这个问题，答案非常模糊和含糊其辞。跟踪所有IE9更改的最佳URL是：http://msdn.microsoft.com/en-us/ie/ff468705 - Chad Lundgren

谢谢Chad！我怀疑它没有简单的支持。 - James Alexander

文本阴影在IE6中就已经存在了，尽管在较新的版本中需要使用JavaScript或非标准CSS。请参见http://whattheheadsaid.com/2011/05/creating-a-nice-text-shadow-in-internet-explorer - fabspro

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
首选小写十六进制颜色值以获得更好的gzip压缩，并明确说明background-color和background-image而不是background，因为这可能会导致在不支持线性渐变的浏览器中出现渲染错误。 大部分内容来自我的回答。

- Volker E.