Question

以下代码在Safari和Firefox中运行良好，但在IE6中运行不正常。当我为display:block添加#horNav li a时。 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>

Answer 1

同时将float: left添加到a。那么您在display: block;上也不需要a因为浮动元素自动成为块

Answer 2

尝试以下方法：

删除float：left;对于#horNav li并添加

#horNav li { display: inline-block; }

我认为您可以删除#horNav li a

的行高和高度

display：阻止IE6中的浮动

2 个答案: