Question

我正在使用简单的<ul><li></li><ul>系统构建导航并将它们浮动到左侧，以便它们显示为内联。以下代码适用于所有浏览器，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上。

我理解问题是我必须为IE <li>定义宽度以使其正确浮动，但我希望这些仍然是可变宽度。无论如何都要正确地浮动它们没有限制宽度？

Answer 1

如果我正确理解问题，那么在IE6以外的浏览器中，列表项会彼此相邻，但在IE6中它们会相互叠加。

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

ul#sandbox_modalbox_nav li a { float:left; }

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

Answer 2

不是我能想到的，我无法想象如何声明可以改变的宽度，除非在em中定义它。如果您的内容可能少于10个字符，则width: 11em; padding: 0.5em 1em;可能会为内容提供足够的空间，同时仍然可以定义宽度。

Answer 3

IE 6在<li>个元素之间有一些空格。尝试将所有列表项放在同一行，它们之间没有空格。

编辑：进一步检查时，我不认为空白是你的问题。你的例子有很多无关的风格 - 很难说出问题所在。

Answer 4

我通常通过将浮动列表项设置为宽度来解决此问题：IE6为0。由于某种原因或其他原因导致它们具有正确的动态宽度。

您可以在条件评论中执行此操作：

<!--[if lte IE 6]>
    <style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->

或者只是利用IE缺乏对CSS选择器的支持，将宽度设置为0，然后再回到现代浏览器的默认“auto”：

ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }

在IE 6中浮动LI

4 个答案: