在IE的純CSS下拉菜單中缺少背景顏色

我最近爲純粹使用CSS的現有網站創建了一個新的下拉菜單。它在功能上運行良好，唯一的問題是下拉菜單的背景顏色不顯示在Internet Explorer中。它只是在Internet Explorer上呈現白色，當它應該是兩種混合顏色的漸變，並且在懸停時呈現不同的橙色。我無法弄清楚爲什麼會發生這種情況或者問題出在哪裏。在IE的純CSS下拉菜單中缺少背景顏色

這裏的CSS：

CSS

.menu{ 
border:none; 
border:0px; 
margin:0px; 
padding:0px; 
height: 24px; 
width: 904px; 
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
} 

.menu ul{ 
background-color:#ffffff; 
height:35px; 
list-style:none; 
margin:0px auto; 
padding:0; 
} 

.menu li{ 
    float:left; 
    padding:0px; 
    margin: 0px 10px; 
    } 

.menu li a{ 
background:#ffffff; 
color:#333; 
display:block; 
font-weight: 500; 
line-height:20px; 
margin:0px; 
padding:0px 40px; 
text-align:center; 
text-decoration:none; 
border: 1px #FFF solid; 
    } 

    .menu li a:hover, .menu ul li:hover a{ 
color:#000; 
text-decoration:none; 
border: 1px #666666 solid; 
     } 

.menu li ul{ 
    background-color:#ffffff; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
    } 

.menu li:hover ul{ 
    display:block; 

    } 
.menu li li { 
    background:bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:220px; 
    } 

.menu li:hover li a{ 

    } 

.menu li ul a{ 
    display:block; 
    height:24px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380)); 
    background:-moz-linear-gradient(center top, #fae4bd 5%, #eac380 100%); 
    } 

    .menu li ul a:hover, .menu li ul li:hover a{ 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FC6), color-stop(1, #F93)); 
background:-moz-linear-gradient(center top, #F93 5%, #F90 100%); 
border:1px solid #333; 
color:#ffffff; 
text-decoration: none; 
     } 

.menu p{ 
    clear:left;}

HTML

<div class="menu"> 
<ul> 
    <li><a href="index.html" target="_self" >HOME</a></li> 
    <li><a href="" target="_self" >CLIENT SECTION</a> 
     <ul> 
     <li><a href="clientsinformation.htm" target="_self">CLIENT INFORMATION</a></li> 
     <li><a href="temporarystaff.htm" target="_self">TEMPORARY STAFF</a></li> 
     <li><a href="permanentstaff.htm" target="_self">PERMANENT STAFF</a></li> 
     </ul> 
    </li> 
    <li><a href="" target="_self" >APPLICATIONS</a> 
     <ul> 
     <li><a href="applicantinfo.htm" target="_self">APPLICANT INFORMATION</a></li> 
     <li><a href="interviewtechniques.htm" target="_self">INTERVIEW TECHNIQUES</a></li> 
     <li><a href="cvtips.htm" target="_self">CV TIPS</a> 
     </ul> 
    </li> 
    <li><a href="praca.htm" target="_self" >WHY US?</a></li> 
    <li><a href="contact.htm" target="_self" >CONTACT US</a></li> 
</ul>

我敢打賭，這可能是小的和明顯的，但任何幫助瓦特將不勝感激。非常感謝。

來源

2011-11-17 Dannyd86

Internet Explorer不支持CSS3漸變。相反，你必須使用IE專有的和可怕的filter。

.menu li ul a { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380)); 
    background:-moz-linear-gradient(center top, #fae4bd 5%, #eac380 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380'); /* for IE */ 
}

您已經應用有不能在IE被複制的5％至100％的不透明度梯度 - 至少不通過僅使用梯度filter。

來源

2011-11-17 15:42:54

解決了這個問題。非常感謝！ – Dannyd86

根據您使用的Internet Explorer版本的不同，添加：將鼠標懸停在不支持的其他元素上。

符合標準的模式（strict！DOCTYPE）的Windows Internet Explorer 7及更高版本可以將：hover僞類應用於任何元素，而不僅僅是鏈接。如果僞類不是專門應用於選擇器中的元素（如A標記），則假定爲通用（*）選擇器。濫用：hover僞類會對頁面性能產生負面影響。

http://msdn.microsoft.com/library/ms530766.aspx

來源

2011-11-17 15:40:55 Filip

在IE的純CSS下拉菜單中缺少背景顏色

回答

相關問題