梯度没有在IE9

四舍五入

我创建了一个圆角按钮，在IE9的渐变背景不被圆：梯度没有在IE9

Square instead of rounded

这里是CSS：

.search button { 
    padding: 10px; 
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif; 
    font-size: 16px; 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

哪有我解决这个问题？

来源

2013-03-19 Andrei

[巨魔]使用真正的浏览器？[/ troll] – njzk2 2013-03-19 14:17:08

看看这个问题：http：// stackoverflow。com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – 2013-03-19 14:33:14

我使用的是真实的浏览器，但我的客户端并没有:) – Andrei 2013-03-19 14:36:44

删除您的css类中的过滤器样式。

JS Fiddle Example

如果你想为IE8梯度及以下，那么你需要创建一个单独的CSS文件，并在此把它包：

<!--[if lte IE 8]> 
[css path here] 
<![endif]-->

你不能同时拥有一个渐变和圆形IE9中的角落按钮。事实上，Twitter的Bootstrap框架将IE9按钮降低为具有圆角的纯色背景色。

来源

2013-03-19 18:31:15 ROFLwTIME

在IE9中，这发生在所有具有圆角和CSS渐变的元素上，不只是按钮。有用的回退选项是使用背景图像而不是CSS渐变。 – 2013-03-25 15:15:14

IE9是一个非常好的浏览器;问题是使用旧的filter样式。

他们从来没有任何好处，他们只是真的留在IE9的遗产支持的原因。他们有许多怪癖，包括这一点，这是众所周知的。

你的问题是，IE9不支持标准的CSS渐变，所以问题是做什么，而不是filter如果你想使用它们？

有各种答案，但最好的答案是CSS3Pie。

这是一个小小的JavaScript库，允许您在IE9（以及IE6以上的所有其他IE版本）中使用标准CSS渐变。它也为不支持它们的IE版本增加了border-radius和box-shadow。

它不显眼，并且不会在其他浏览器中引起额外的开销。

CSS3Pie使用IE的矢量图形语言VML渲染其渐变，因此为什么它不受filter错误的影响。

如果您确实想避免使用Javascript，可以使用渐变为您自己创建VML或SVG元素。这可以使用URI编码的图像在您的CSS内完成（例如here）。但让CSS3Pie为你做到这一点更容易。

您可以使用的唯一其他解决方案是加载老派背景图形，或仅提供纯色背景色作为后备选项。

无论如何，您应该提供后备素色，但对于此问题，我的钱在CSS3pie上是最佳解决方案。

希望有所帮助。

来源

2013-03-19 20:21:48 Spudley

梯度没有在IE9

回答

相关问题