IE 8+中的CSS漸變除了一個以外，在網站的所有部分上工作

在爲我當前設計的網站測試瀏覽器兼容性時，我發現CSS漸變在網站的所有部分上都工作正常，除了導航鏈接在IE 8和IE 9.IE 8+中的CSS漸變除了一個以外，在網站的所有部分上工作

我正在使用'過濾器'屬性。資產淨值的HTML結構

<ul id="nav"><li><a>Some Name</a></li></ul>

和CSS的元素，

#nav li a 
{ 
background: rgb(191,82,0); 
background: -moz-linear-gradient(top, rgb(191,82,0) 0%, rgb(124,51,0) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,82,0)), color-stop(100%,rgb(124,51,0))); 
background: -webkit-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%); 
background: -o-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%); 
background: -ms-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf5200', endColorstr='#7c3300',GradientType=0); 
background: linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%); 
position: relative; 
height: 1.3em; 
padding: 0.2em 2em 0.1em 2em; 
color: #FFF; 
font-size: 0.9em; 
font-family: FertigoProRegular; 
text-transform: uppercase; 
border-radius: 1em; 
box-shadow: 0em 0em 0.5em #aaa; 
border-bottom: 3px solid #5C2600; 
}

我試着分配一個特定的ID的導航鏈接，然後將CSS應用到它。但那並沒有奏效。我知道PIE和其他這樣的HTC行爲元素會起作用。但我想知道爲什麼它不能在這個領域工作。

首先，我認爲這是一個問題，發生在所有的<a>元素。但是，情況並非如此，因爲該網站上的其他網站上的其他元素都顯示爲完美的漸變效果。問題僅限於導航鏈接。

任何幫助，將不勝感激。

來源

2011-09-17 Mani Viswanathan

您是否嘗試過顯示：阻止某個元素？也許這就是問題 – Mohsen

@Mohsen但是，當我們將display：block應用到鏈接時，border-radius將消失。那就是問題所在。 –

嘗試內聯塊然後 – Mohsen

當我做了梯度菜單我總是用Ultimate CSS Gradient Generator

輸出舊的Internet Explorer的透明度格式（是的，這甚至會與IE6的工作！

來源

2011-09-17 08:44:00 Side

我已經在上面的一段代碼中正確使用了發生器@ Side。 –

好的會檢查你的代碼 – Side

您的代碼就可以了。只是試圖在我的IE8。唯一的問題是你的顏色如果更改啓動或你的filter你會看到差別結束顏色;

如果你改變你的過濾器：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf5200', endColorstr='#7c33ee',GradientType=0);

參見行動http://jsbin.com/icenuk

你會看到代碼正在工作。這是Ultimate CSS generator或IE DXImageTransform漸變問題，它們不會產生與標準CSS漸變相同的漸變。您可能需要在過濾器中手動更改顏色以獲取所需內容。或者您可以使用另一個梯度生成器，如this：

來源

2011-09-18 09:44:10 Mohsen

IE 8+中的CSS漸變除了一個以外，在網站的所有部分上工作

回答

相關問題