internet-explorer - 如何让渐变在 IE9 中工作？

Question

CSS:

.silver {
color: #636363;
border: solid 1px #9C9C9C;
background: #D6D6D6;

/*important part*/
background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#BABABA));
background: -moz-linear-gradient(top,  #E8E8E8,  #BABABA);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa');

padding: 2px 5px 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
font-size: 95%;
}

当我将类应用于输入/提交按钮时，这会起作用，但是当我将类应用于 span 或 div 时，渐变不显示。如何让渐变在 IE9 中正常工作？

Answer 1

IE9发布时，本应预示着IE的新曙光；一个支持其他人多年来一直支持的所有新 Shiny 浏览器功能的版本。

好消息是它在很大程度上成功了。

坏消息是他们在 CSS 渐变方面失误了。 IE9 不支持它们。但也不支持旧的 IE6/7/8 hack 通过 filter 属性使渐变工作。

有一个解决方案。您可以将 SVG 图像渲染到背景中，这意味着您可以简单地创建一个带有渐变的 SVG 并进行排序。但是等等，事情没那么简单；如果你有 filter 属性来支持 IE8 和 friend ，你实际上需要摆脱它才能使 SVG 技巧与 IE9 一起工作。

此时一切都变得有点复杂。您需要条件注释、不同 IE 版本的单独样式表，或其他一些解决问题的方法。

或者您可以使用 CSS3Pie .这是一个小的 Javascript 实用程序，它为各种版本的 IE 添加了对许多 CSS 功能的支持。其中一项功能是 CSS 背景渐变。

使用 CSS3Pie，您可以简单地使用标准 CSS background 属性，渐变将在所有 IE 版本中正常工作，就像在其他浏览器中一样。

它适用于从 6 到 9 的所有版本的 IE，因此除了不必乱用我之前描述的 SVG hack 之外，您还可以放弃那种困惑的 filter 样式。这是一场全面的胜利。我建议您将其作为解决方案。

但是，如果您决定宁愿使用适用于 IE9 的 SVG 渐变来使用困难的方法，那么这里有一个站点链接，它将为您生成 CSS 代码:http://www.colorzilla.com/gradient-editor/勾选“支持 IE9”复选框以查看您需要的代码，但还要注意同时出现的警告文本和进一步说明。

希望对您有所帮助。