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的新曙光;一个版本，支持其他人多年来一直支持的所有新的闪亮浏览器功能。

好消息是，在大多数情况下，它成功了。

坏消息是，当谈到CSS渐变时，他们放弃了球。 IE9不支持它们。但是也不支持旧的IE6 / 7/8 hack通过filter属性获得渐变效果。

有一个解决方案。您可以将SVG图像渲染到背景中，这意味着您可以简单地创建一个带有渐变的SVG并对其进行排序。但等等，它不是那么简单;如果你有filter属性来支持IE8和朋友，你实际上需要摆脱它以使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 '复选框可以查看您需要的代码，但也请注意同时出现的警告文字和进一步说明。

希望有所帮助。

Answer 2

这不正确html：

<input type='submit' class='silver'>buttons</input>

输入标记是自闭标记<input />，因此内部不能有数据。

<input type='submit' class='silver' value="buttons" />

或者您可以将按钮标记用于此目的

<button class='silver'>buttons</button>

如何在IE9中使用渐变？

2 个答案: