html - 在 IE 6 中 float LI

Question

我正在使用简单的 <ul><li></li><ul> 构建导航系统并将它们 float 到左侧，以便它们显示为内联。以下代码适用于 所有 浏览器，IE 6 除外。

HTML

<div id="sandbox_container">
    <div id="sandbox_modalbox">
        <div>
            <ul id="sandbox_modalbox_nav">
                <li id="Intro" class="modal_active"><a href="#Intro">Item 1</a></li>
                <li id="Queries"><a href="#Queries">Item 2</a></li>
            </ul>
        </div>
        <!-- more content here -->
    </div>
</div>

CSS

#sandbox_container { 
    min-height: 385px; 
    width: 940px; 
    padding-bottom: 20px 
}
#sandbox_modalbox { 
    width: 940px; 
    padding-top: 5px; 
    margin-bottom: -10px;
}

ul#sandbox_modalbox_nav { 
    width: 936px; 
    height: 52px; 
    margin: 0px 2px 0px 2px;
    padding-top: 0px; 
    display: block; 
}
ul#sandbox_modalbox_nav li {
    height:52px; 
    float: left; 
    list-style: none;
    padding: 0px; 
    display: block; 
}
ul#sandbox_modalbox_nav li a { 
    padding: 12px 30px 0px 30px; 
    height: 52px; 
    display: block; 
}

我也把它放在了 JSBin 上.

我明白问题是我必须为 <li> 定义宽度为了让 IE 正确 float 它，但我更希望这些保持可变宽度。无论如何没有限制宽度可以正确 float 它们吗？

Answer 1

如果我对问题的理解正确，那么在 IE6 以外的浏览器中，列表项会彼此相邻显示，但在 IE6 中，它们会出现在彼此之上。

如果是这种情况，可能是因为 a 元素没有 float ，尽管它们的包含元素是 float 的。我只想使用条件注释并仅针对 IE6 添加以下内容:

ul#sandbox_modalbox_nav li a { float:left; } 

此外，Neall is right on track with the whitespace issue ，即使它不能解决您当前的显示问题，它也可能导致以后在元素之间出现一些不需要的空间。