CSS：Internet Explorer 中的简单渐变 <= 8答案

【问题标题】：CSS: Simple Gradients in Internet Explorer <= 8CSS：Internet Explorer 中的简单渐变 <= 8
【发布时间】：2012-04-17 14:15:39
【问题描述】：

相信大家都知道，Internet Explorer 可以处理简单的渐变。这是来自 Twitter Bootstrap 的 sn-p，例如：

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

但是，我看到有些人使用两种 CSS 规则（一种用于 IE

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

我的问题是，第二条规则真的有必要吗？ Twitter Bootstrap 非常彻底，但它不使用任何“-ms-filter”规则。根据this page，-ms-filter属性是CSS的扩展，可以作为IE8标准模式下filter的同义词。

【问题讨论】：

标签： css internet-explorer gradient

【解决方案1】：

我的建议：

使用 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 旋转元素的样式删除所有样式 - 需要很长时间才能弄清楚发生了什么）。

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

在 IE8 发布时，XHTML 是当月的新风格，编写完美验证的代码是许多开发人员的首要任务。这可能是更改语法以包含引号的强大驱动力。由于杂散的冒号，不可能编写使用旧的filter 样式验证的 CSS。使用新的-ms-filter 样式，人们可以编写有效的 CSS。随着好主意的发展，这个并没有真正奏效，因为人们当然不得不继续使用旧语法，但意图是好的。

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

另一个值得了解的事实是 W3C 正在标准化CSS property called filter。它将与 Microsoft filter 风格完全不同，工作方式也完全不同。如果/当它被标准化并且浏览器开始支持它时，这两种语法之间将会有明显的冲突。

【讨论】：

我不太喜欢 CSS3Pie。请参阅 here 和 here。对于渐变，filter 版本适用于 IE6、IE7、IE8 和 IE9。在 IE10 的消费者预览版中，它只在兼容模式下工作。 -ms-filter 版本适用于 IE8 和 IE9，但不 IE10——即使在兼容模式下也是如此。 IE10 使用 -ms-linear-gradient。似乎 -ms-filter 版本只适用于 IE8 和 IE9，但它们都支持 filter ，所以为什么要打扰 -ms-filter 版本？
我已经更新了答案，提供了更多关于 -ms-filter 的原因和方法的详细信息。
顺便说一句 - 你是对的，CSS3Pie 可能很慢。但过滤器也是如此。除非您严重过度使用它们，否则它们都不会那么慢。 CSS3Pie 具有过滤器的一大优势，因为它支持渐变的 alpha 通道颜色，而 MS 的过滤器样式不支持。当然，您的另一个选择是简单地为旧 IE 使用纯色回退。除非它完全破坏了您的网站设计，或者您的受众群体中的 IE 用户比例非常高，否则有时让他们使用纯色和方角会更简单。
谢谢！我认为您对此一针见血：“IE8 发布时给出的含义足以成为推荐的做法，即在样式表中同时提供这两种语法。”由于 -ms-filter 版本仅适用于 IE8 和 IE9，我认为没有任何理由保留它。我将只使用 filter 版本。感谢您帮助我得出这个结论！

【解决方案2】：

把它留在里面会有什么危害？

如果浏览器不理解这行 CSS，它会忽略它。

这两行 CSS 几乎相同。我猜测微软决定从 IE8 开始使用其他浏览器一直用于 yonks 的 -（连字符）前缀更改专有 CSS 的语法。

从技术上讲，无论哪种方式，CSS 都不符合 W3C，因此另一行专有 CSS 不会造成任何伤害。

在最好的时候不值得尝试理解 IE！

【讨论】：

一个渐变已经需要这么多重复的线条，那么为什么在不需要的时候再添加一条呢？另外，在 filter 版本正常工作时保持 -ms-filter 版本违背了 KISS 原则并增加了文件大小。我只是好奇使用这两个版本的开发人员是否有这样做的合乎逻辑的理由。
哦，是的，从 IE10 的消费者预览版开始，不再支持 -ms-filter 版本，因此它显然只适用于 IE8 和 IE9。

【解决方案3】：

您似乎回答了自己的问题。是的，他们是需要的。微软试图更符合标准意味着某些版本的 IE 对过滤器属性的语法规则略有不同。

在 IE7 中，只需 filter: 后跟 progid:DXIma... 等即可。但是对于 IE8+，它可以在兼容模式下使用 IE7 后备，以及更合适的 -ms- 前缀属性作为过滤器，表示供应商特定的 css 属性，以及它在 qoutes 中的值。

【讨论】：

filter 版本适用于 IE6、IE7、IE8 和 IE9，但不 IE10。 -ms-filter 版本在 IE10 中也不起作用。 IE10 使用 -ms-linear-gradient。当然，IE10 尚未正式发布，因此可能会有所变化。无论如何，如果版本 6-9 都支持 filter 版本，那为什么还要麻烦 -ms-filter 版本呢？
我应该补充一点，filter 版本在 IE10 的兼容模式下工作，但 -ms-filter 版本在 IE10 中无法工作——即使在兼容性方面也是如此模式。
微软目前有 2 个相互冲突的政策。首先是他们希望更加符合标准。这就是让他们介绍-ms-filter 的原因，因为这或多或少被认为是正确的。然后第二个策略是长期支持他们自己的平台和功能，这就是兼容模式和一系列持续工作的属性的原因，因为微软认为他们可以准确预测某人想要做什么，即使它是针对旧版本的 IE。这确实是在要求混淆：s