CSS:Internet Explorer中的简单渐变<= 8

Nic*_*ick 5 css internet-explorer gradient

我相信大家都知道,Internet Explorer可以处理简单的渐变.以下是Twitter Bootstrap的片段,例如:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
Run Code Online (Sandbox Code Playgroud)

但是,我看到有些人使用两个CSS规则(一个用于IE <8,一个用于IE 8),如下所示:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */
Run Code Online (Sandbox Code Playgroud)

我的问题是,第二条规则真的有必要吗?Twitter Bootstrap非常彻底,但它没有使用任何"-ms-filter"规则.根据此页面,-ms-filter属性是CSS的扩展,可以在IE8标准模式下用作过滤器的同义词.

Spu*_*ley 3

我的建议:

使用CSS3Pie—— http://css3pie.com/

这是一个适用于 IE6、IE7 和 IE8 的 JavaScript 库,可通过修补来支持多种 CSS3 功能,包括渐变。

是的,如果您愿意,您可以使用可怕的 IE 特定filter样式,但 CSS3Pie 允许您使用标准 CSS 样式来实现这些功能。容易多了。

要真正回答你的直接问题:

是的,-ms-filter通常需要样式。IE8 将始终使用它而不是filter主要用于 IE6 和 IE7 的 。在某些情况下filter可以在 IE8 中工作,但不是全部,因此最好使用-ms-filter以确保 IE8 兼容性。

[编辑]他们为什么要改变它?因为当微软发布 IE8 时,他们强调要努力“符合标准”。

为了使浏览器符合标准,它应该为其支持的任何非最终 W3C 标准的 CSS 属性使用供应商前缀。因此,通过添加-ms-前缀,微软试图(姗姗来迟)消除他们对全局 CSS 命名空间的污染。

另外,添加了引号,因为filter没有引号的旧语法是无效的CSS(主要是因为 后面的冒号progid),并且导致某些浏览器出现问题。(前段时间我在 Firefox 3.6 中遇到过一个实例,它会删除遵循filter旋转元素的样式的所有样式 - 花了很长时间才弄清楚发生了什么)。

微软保留了对原始filter语法的向后兼容性,这在很大程度上是出于实用主义的考虑。MS 无法承担破坏所有使用旧语法的站点的费用。但微软强烈暗示开发人员应该同时使用这两种风格,因为他们将filter在后续版本的 IE 中放弃对旧风格的支持。事实证明,他们一举放弃了对 和 的支持filter-ms-filer但 IE8 发布时给出的影响足以使其成为在样式表中提供这两种语法的推荐做法。

在 IE8 发布时,XHTML 是当月的新风尚,编写经过完美验证的代码是许多开发人员的首要任务。这可能是改变语法以包含引号的强大推动力。由于杂散的冒号,不可能编写使用旧filter样式进行验证的 CSS。相反,使用新-ms-filter样式可以让人们编写有效的 CSS。尽管想法很好,但这个想法并没有真正实现,因为人们当然必须继续使用旧语法,但意图是好的。

值得指出的是,其他专有样式也得到了相同的处理。例如,您可以-ms-behavior在IE8中使用而不是旧的behavior样式。没有人使用它。为什么?我真的不知道。

另一个值得了解的事实是,W3C 正在标准化名为 的 CSS 属性filter。它将做与微软filter风格完全不同的工作,并且工作方式也完全不同。如果/当它被标准化并且浏览器开始支持它时,两种语法之间将会出现明显的冲突。

  • 我不太喜欢 CSS3Pie。请参阅[此处](http://stackoverflow.com/a/7668408/937084)和[此处](https://twitter.com/#!/grantmccall/status/117649720297525248)。对于渐变, **filter** 版本适用于 IE6、IE7、IE8 和 IE9。在 IE10 的消费者预览版中,它仅在兼容模式下工作。**-ms-filter** 版本适用于 IE8 和 IE9,但 *不适* IE10 — 即使在兼容模式下也是如此。IE10 使用**-ms-线性梯度**。看起来 **-ms-filter** 版本只适用于 IE8 和 IE9,但它们也都支持 **filter**,那么为什么要费心使用 **-ms-filter** 版本呢? (2认同)