在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>
我敢打赌,这可能是小的和明显的,但任何帮助瓦特将不胜感激。非常感谢。
答
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
。
答
根据您使用的Internet Explorer版本的不同,添加:将鼠标悬停在不支持的其他元素上。
符合标准的模式(strict!DOCTYPE)的Windows Internet Explorer 7及更高版本可以将:hover伪类应用于任何元素,而不仅仅是链接。如果伪类不是专门应用于选择器中的元素(如A标记),则假定为通用(*)选择器。滥用:hover伪类会对页面性能产生负面影响。
解决了这个问题。非常感谢! – Dannyd86