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 ，即使它不能解决您当前的显示问题，也可能会导致稍后元素之间出现一些不需要的空格。