我为标题道歉,我真的不知道更好的方式(如果你有更好的方法让我知道,我会改变它)。请考虑以下代码:
<html>
<head>
<title>IE 6 Menu Test</title>
<style type="text/css">
.nMenu {
border: 1px solid black;
}
.nMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
text-decoration: none;
}
.nMenu a:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="nMenu">
<ul>
<li><a href="">One</a></li><li><a href="">Two</a></li><li><a href="">Three</a></li><li><a href="">Four</a></li><li><a href="">Five</a></li>
</ul>
</div>
<hr />
<div class="nMenu">
<ul>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
<li><a href="">Five</a></li>
</ul>
</div>
</body>
</html>
在firefox中,顶部和底部菜单显示完全相同。但是在IE6中,底部版本与顶部相同,除了在每个列表元素之后回车时,在每个元素上方显示额外的填充。没有回车符的顶级版本没有。滚动底部列表中的项目时,这一点尤其明显(额外的填充)。
似乎IE6由于某种原因呈现回车。现在我们只是像上面的例子那样使用格式化代码,但这不太理想。我们可以在CSS中放一些东西让它在IE6中看起来合适吗?
答案 0 :(得分:7)
将display: block;
应用于li
,告诉IE6将a
宽度设为100%,并告诉所有浏览器将a
显示为块。< / p>
.nMenu li { display: block; } /* hack for IE6 */ * html .nMenu a { width: 100% } .nMenu a { display: block; padding: 3px 0px 3px 5px; background-color: #fff; border-bottom: 1px solid #eee; font-weight:bold; text-decoration:none; }
在IE6中尝试过,两个列表看起来完全相同,并且在Firefox中渲染完全相同。
答案 1 :(得分:1)
我没有主要问题的解决方案,但您可以将代码格式更改为更好看,并且仍可在IE 6中使用。
<div class="nMenu">
<ul>
<li><a href="">One</a></li
><li><a href="">Two</a></li
><li><a href="">Three</a></li
><li><a href="">Four</a></li
><li><a href="">Five</a></li>
</ul>
</div>
答案 2 :(得分:0)
尝试将overflow: hidden;
添加到.nMenu li
。