在CSS中的下拉菜單在IE9中顯示爲透明

Question

在Google的兩天內使用我的CSS並搞亂了我，放棄並轉向你們尋求幫助。 我創建了一個完全在CSS中的下拉菜單。 當在IE9下測試這個時候，顯然它不起作用。

下拉菜單顯示爲透明，我找不到爲什麼我的生活。所有在其他瀏覽器中運行正常，但我似乎無法找到IE不理解的屬性。

我懷疑這部分：

nav ul ul li { 
    float: none; 
    border-bottom: 1px solid #b7b7b7; 
    border-top: 1px solid #fff; 
    position: relative; 
    background: -webkit-linear-gradient(#eeeeee 0%, #d4d4d4 100%); 
    background: linear-gradient(#eeeeee 0%, #d4d4d4 100%); 
    background: -moz-linear-gradient(#eeeeee 0%, #d4d4d4 100%); 
    background: -o-linear-gradient(#eeeeee 0%, #d4d4d4 100%); 
    -moz-box-shadow: inset 2px 2px 5px #ccc; 
    -webkit-box-shadow: inset 2px 2px 5px #ccc; 
    box-shadow: inset 2px 2px 5px #ccc; 
} 

有沒有可能是IE沒有看到背景？我在這裏附上小提琴：http://jsfiddle.net/VU37g/

對CSS的任何幫助或意見，歡迎提前致謝！

Answer 1

由於IE 9不支持漸變，您必須使用專有的MS濾鏡屬性才能達到類似的效果。如果未指定背景顏色的值，則默認情況下將其設置爲transparent。

語法IE會是這樣：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 

More info

Answer 2

爲了讓跨瀏覽器兼容，請遵守本指南

對於IE只有：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 

http://webdesignerwall.com/tutorials/cross-browser-css-gradient