IE9 是否支持 CSS 线性渐变？答案

【问题标题】：Does IE9 support CSS linear gradients?IE9 是否支持 CSS 线性渐变？
【发布时间】：2011-06-25 02:27:08
【问题描述】：

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

【问题讨论】：

【解决方案1】：

关于 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;
 }

&lt;div class=gradient--test&gt;&lt;/div&gt;

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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

在 IE9 中，过滤器将（据我所知）溢出边界半径（圆角）....
解决方案正如奥斯卡所说的那样溢出了边界半径......你们有什么办法可以在 IE 9 中避免这种情况吗？谢谢
我不得不关闭过滤器。边界半径溢出太丑了。
如何摆脱 IE9 中的 ActiveX 脚本？

【解决方案3】：

嗯，IE9 还没有完成，但目前看来您将不得不使用 SVG。我不知道 IE9 中有任何 -ms-gradient 或渐变支持。到目前为止，令我恼火的另一件事是 text-shadow。

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

【讨论】：

即使是最新最好的 RC？根据 RC 的绰号，假设文本阴影和图像渐变不会进入版本是否安全？
更新：我玩过 IE9 RC1，它不支持 CSS3 渐变。它仍然支持专有的 MS 渐变语法，但它们非常简单，不能只有开始和停止颜色，所以它们在我的书中并不等同。它也忽略了文本阴影。有人在 IE9 推特提要上询问了这个问题，答案非常含糊且不置可否。跟踪所有 IE9 更改的最佳 URL 是：msdn.microsoft.com/en-us/ie/ff468705
谢谢乍得！我怀疑没有简单的支持。
文本阴影至少从 IE6 开始就在 IE 中可用，尽管它需要 javascript，或者在较新的版本中需要非常非标准的 CSS。见whattheheadsaid.com/2011/05/…