Question

我最近为纯粹使用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>

我敢打赌这可能很小而且显而易见，但任何帮助都会非常感激。非常感谢。

Answer 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。

Answer 2

根据您使用的Internet Explorer版本添加：将鼠标悬停在不受支持的其他元素上。

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

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

在IE中的纯CSS下拉菜单中缺少背景颜色

2 个答案: