IE 中纯 CSS 下拉菜单中缺少背景颜色答案

【问题标题】：Background colours missing on pure CSS dropdown menu in IEIE 中纯 CSS 下拉菜单中缺少背景颜色
【发布时间】：2011-11-17 15:24:39
【问题描述】：

我最近为一个纯粹使用 CSS 的现有网站创建了一个新的下拉菜单。它在功能上运行良好，唯一的问题是下拉菜单的背景颜色没有显示在 Internet Explorer 中。当它应该是两种混合颜色的渐变和不同的橙色时，它在 Internet Explorer 上只是显示为白色。我不知道为什么会这样或问题可能出在哪里。

这是 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>

我敢打赌，这可能很小而且很明显，但我们将不胜感激任何帮助。非常感谢。

【问题讨论】：

标签： css

【解决方案1】：

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 */
}

您在其中应用的 5% 到 100% 不透明度渐变无法在 IE 中复制 - 至少不能仅使用渐变 filter。

【讨论】：

【解决方案2】：

根据您使用的 Internet Explorer 版本，将 :hover 添加到不受支持的其他元素。

Windows Internet Explorer 7 及更高版本在符合标准的模式（严格 !DOCTYPE）下，可以将 :hover 伪类应用于任何元素，而不仅仅是链接。如果伪类未专门应用于选择器中的元素，例如 A 标记，则假定使用通用 (*) 选择器。不加选择地使用 :hover 伪类会对页面性能产生负面影响。

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

【讨论】：