菜單不能在IE上工作

Question

我希望你能幫助我解決這個問題。 它只顯示深灰色背景，所以漸變不起作用。我試圖自己修復它，但沒有運氣。謝謝你的幫助。 以下是下面的代碼。

#menu{ 
    width: 980px; 

margin-right:0; 
margin-top:0; 
margin-bottom:0; 
    padding: 10px 0 0 0; 
    list-style: none; 
    background: #111; 
    background: -moz-linear-gradient(#444, #111); 
     background: -webkit-gradient(linear,left bottom,left top,color-stop(0, 

#111),color-stop(1, #444)); 
    background: -webkit-linear-gradient(#444, #111);  
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111); 
    background: linear-gradient(#444, #111); 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    -moz-box-shadow: 0 2px 1px #9c9c9c; 
    -webkit-box-shadow: 0 2px 1px #9c9c9c; 
    box-shadow: 0 2px 1px #9c9c9c; 
} 

#menu li{ 
    float: left; 
    padding: 0 0 10px 0; 
    position: relative; 
} 

#menu a{ 
    float: left; 
    height: 25px; 
    padding: 0 25px; 
    color: #999; 
    text-transform: uppercase; 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a{ 
    color: #fafafa; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #fafafa; 
} 

#menu li:hover > ul{ 
    display: block; 
} 



#menu ul li{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 

#menu ul li:last-child{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 

#menu ul a{  
    padding: 10px; 
    height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

*html #menu ul a{ /* IE6 */ 
    height: 10px; 
    width: 150px; 
} 

*:first-child+html #menu ul a{ /* IE7 */  
    height: 10px; 
    width: 150px; 
} 

#menu ul a:hover{ 
     background: #0186ba; 
    background: -moz-linear-gradient(#04acec, #0186ba);  
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to 

(#0186ba)); 
    background: -webkit-linear-gradient(#04acec, #0186ba); 
    background: -o-linear-gradient(#04acec, #0186ba); 
    background: -ms-linear-gradient(#04acec, #0186ba); 

    background: linear-gradient(#04acec, #0186ba); 

} 

#menu ul li:first-child a{ 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 

#menu ul li:first-child a:after{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #444; 
} 

#menu ul li:first-child a:hover:after{ 
    border-bottom-color: #04acec; 
} 

#menu ul li:last-child a{ 
    -moz-border-radius: 0 0 5px 5px; 
    -webkit-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
} 

/* Clear floated elements */ 
#menu:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

* html #menu    { zoom: 1; } /* IE6 */ 
*:first-child+html #menu { zoom: 1; } /* IE7 */ 

Answer 1

像阿南朵說，使用CSS3漸變發電機像http://www.colorzilla.com/gradient-editor/，這將產生與所有瀏覽器兼容的代碼。

如果問題是IE6-8，你需要像這樣添加到您的CSS：

#menu{  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', 
    endColorstr='#111',GradientType=1); 
} 

對於IE9，不支持CSS3漸變，你需要使用SVG梯度。把你的CSS是這樣的：

#menu{ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDQ0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAxMTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
} 

而你需要一個「梯度」類添加到您的所有元素有一個梯度，下面覆蓋添加到您的HTML完成IE9支持：

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->