梯度沒有在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

回答

相關問題