在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下拉菜单中缺少背景颜色

回答

相关问题