我使用一个简单的列表作为导航,根据链接正常,悬停或当前状态显示相应的背景图像。在IE6中,当前页面或实际页面被忽略,不显示不同的图像并使链接保持活动状态。代码是 -
<div id="mainNav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../work.html" class="current">Projects</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
导航的CSS是 -
#topcontent1 #mainNav {
position: absolute;
left: 86px;
width: 328px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.9em;
padding: 0px;
clear: both;
color: #666633;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: 700;
text-transform: uppercase;
}
#topcontent1 #mainNav ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#topcontent1 #mainNav li {
float: left;
margin: 0;
padding:0;
display: block;
}
#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #fff;
text-decoration: none;
display: block;
background-repeat: no-repeat;
margin-right: 10px;
width: 99px;
height: 62px;
margin-top: 0px;
line-height: 62px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0;
text-align: center;
padding-top: 60px;
background-image: url('../images and html/images/tabnorm.jpg');
}
#topcontent1 #mainNav li a:hover {
color: #f8b449;
border: none;
background-image: url('../images and html/images/tabhover.jpg');
background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current {
color: #AAB3B2;
background-image: url('../images and html/images/tabcurr.jpg');
background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current:hover {
color: #AAB3B2;
cursor: default;
}
#topcontent1 #mainNav ul li a.current样式似乎被IE6忽略了。
任何人都可以看到问题或建议解决问题
答案 0 :(得分:1)
IE6似乎在复杂的选择器语句中存在问题。也许尝试使用
#mainNav a.current
而不是
#topcontent1 #mainNav ul li a.current
答案 1 :(得分:0)
在您的代码中更改此内容
#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {
到
#topcontent1 #mainNav li a {