display:block 打破 IE6 中的浮动
下面的代码在 Safari 和 Firefox 中工作正常，但在 IE6 中不行。当我为 #horNav li a 添加 display:block 时。 IE6 中的浮动会中断。有没有办法让 display:block 并且不破坏浮动？如果我包含 #horNav li 的宽度，它将起作用，但我不想指定它的宽度，因为宽度可能会有所不同。
CSS：
#horNav{
margin:0;
padding:0;
list-style-type:none;
border: 0px solid #486B02;
font-size:13px;
font-family:Arial;
}
#horNav li{
float:left;
}
#horNav li a {
display:block;
color: #000;
text-decoration: none;
height:30px;
line-height:30px;
padding:0 40 0 19;
border:solid 1px blue;
}
HTML：
<ul id="horNav">
<li><a>Menu 1</a></li>
<li><a>Menu 2</a></li>
<li><a>Menu 3</a></li>
<li><a>Menu 4</a></li>
</ul>
The code below works fine in Safari and Firefox but not in IE6. It's when I include the display:block for #horNav li a. The float breaks in IE6. Is there a way to have display:block and not to break the float? If I include width for #horNav li it will work, but I don't want to specify the width for it as the the width may vary.
CSS:
#horNav{
margin:0;
padding:0;
list-style-type:none;
border: 0px solid #486B02;
font-size:13px;
font-family:Arial;
}
#horNav li{
float:left;
}
#horNav li a {
display:block;
color: #000;
text-decoration: none;
height:30px;
line-height:30px;
padding:0 40 0 19;
border:solid 1px blue;
}
HTML:
<ul id="horNav">
<li><a>Menu 1</a></li>
<li><a>Menu 2</a></li>
<li><a>Menu 3</a></li>
<li><a>Menu 4</a></li>
</ul>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将
float: left添加到a中。然后，您将不再需要a上的display: block;，因为浮动元素自动成为块add
float: leftto theaas well. You will not then needdisplay: block;on theaas well because a floated element is automatically a block尝试以下操作：
删除 float:left;对于 #horNav li 并添加
#horNav li { display: inline-block; }我认为您可以删除 #horNav li a 的行高和高度
Try the following:
Remove float:left; for #horNav li and add
#horNav li { display: inline-block; }I think you can remove line-height and height for #horNav li a