使用IE過濾器進行背景漸變

我在我的CSS中使用此屬性爲IE創建漸變。使用IE過濾器進行背景漸變

.icons, 
#nav { 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9ccf', endColorstr='#423f88', GradientType=0); /* IE6-9 */ 
}

應用後，我可以看到漂亮的漸變預期。但是，我的圖標不再具有應用邊框半徑，並且我的#nav z-index失敗，並且我的子菜單無法按預期方式加載，並根據#nav高度和寬度進行裁剪。在所有IE中。

來源

2013-04-17 scottgemmell

你能更明確地給出一些代碼嗎？ – tbem

http://jsbin.com/eyidim/5/ – scottgemmell

http://jsbin.com/eyidim/5/edit – scottgemmell

IE的舊專有filter款式與border-radius不兼容。他們使用具有方形角的activeX控件，並覆蓋您可能嘗試使用的任何圓角。這是一個已知的錯誤，沒有解決方法。

filter是activeX控件的另一個問題是它攜帶了activeX控件所具有的所有bug和怪癖。這包括搞亂分層，以及其他有趣的東西。我的建議是不惜一切代價避免使用filter。

我會注意到border-radius只能在IE9中向上工作，所以你的問題不適用於IE8或更早的版本。

解決方案：我建議你試試CSS3Pie。這是一個插入到IE6 - IE9的JavaScript庫，併爲這些瀏覽器提供了對標準CSS3漸變的更好支持。它使用VML圖形來實現，因此它不需要使用filter，因此不具有filter漸變可能導致的缺陷。（它確實有一些自己的特點，但它們相比較小，易於處理，並且在CSS3Pie網站上有詳細記錄）。另一個好處是它允許您爲所有瀏覽器（包括較舊的IE版本）使用標準的CSS代碼。大贏。

哦，它也爲IE6-8 border-radius，這是你額外的獎勵。（是的，它可以與梯度正常工作）

希望有所幫助。

來源

2013-04-17 11:01:59 Spudley

IE瀏覽器永遠不會是一個耗時的垃圾嗎？非常感謝 – scottgemmell

@scottgemmell - 是的。實際上IE10是一個相當不錯的瀏覽器。（你的問題是說問題出現在所有的IE中，但實際上IE10不會有這個問題，因爲它支持CSS3漸變作爲標準，並且不再支持舊的'filter'風格）。 – Spudley

使用IE過濾器進行背景漸變

回答

相關問題