0

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%;
}

This works when I apply to class to a input / submit button, but the gradients do not display when I apply the class to a span or div. How can I get gradients working in IE9?

4

2 回答 2

1

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

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

坏消息是他们在 CSS 渐变方面丢了球。IE9 不支持它们。但也不支持旧的 IE6/7/8 hack 以通过该filter属性获得渐变。

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

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

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

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

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

但是，如果你决定你宁愿用 IE9 的 SVG 渐变来做这件事，这里有一个链接可以为你生成 CSS 代码：http: //www.colorzilla.com/gradient-editor /勾选“支持 IE9”复选框以查看您需要的代码，但还要注意同时出现的警告文本和进一步说明。

希望有帮助。

于 2012-10-29T22:56:22.900 回答
0

这不正确的html：

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

输入标签是一个自闭合标签<input />，所以里面不能有数据。

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

或者您可以为此目的使用按钮标签

<button class='silver'>buttons</button>
于 2012-10-29T22:25:48.397 回答