Question

我有一个无序列表，列表项包含我需要max-width开启的div：

<div>Some content
    <ul class="myUl">
        <li>
            <div class="dynContent">Some</div><div class="dynContent">dynamic</div><div class="dynContent">content</div><span>Test 1</span><div class="clearFix"></div>
        </li>
        <li>
            <div class="dynContent">blah blah blah blah blah blah blah</div><div class="dynContent">more</div><div class="dynContent">blah</div><span>Test 2</span><div class="clearFix"></div>
        </li>
        <li>
            <div class="dynContent">testing</div><div class="dynContent">3</div><div class="dynContent">2</div><span>Test 3</span><div class="clearFix"></div>
        </li>
    </ul>
</div>

CSS：

.dynContent
{
    float: left;
    font-size: 13px;
    cursor: default;
    padding: 1px 3px 1px 3px;
    border: 1px solid #C5DBEC;
    margin: 1px 3px 0px 3px;
    max-width: 100px;
    white-space:nowrap;
    overflow:hidden;
}
.clearFix
{
    clear:both;
}

这在FF和Chrome中完美运行，但是大惊喜它在IE 8中不起作用。在IE 8中，列表标记显示在我拥有clearFix类的div的位置。 / p>

jsfiddle link

Answer 1

而不是float: left;，请尝试display: inline-block;。

对于与div相同的对齐方式，请为span

添加以下css

.myUl li span {
    overflow: hidden;
    display: inline-block;
}

DEMO

Answer 2

使用

li {clear: both}

并删除clearfix divs

然后在ul

上使用a clearfix method

Answer 3

这会让你修复：将其添加到您的样式中：

.clear_cont {
    min-height:1px;
}

/*-- IE 6 fix --*/
* html .clear_cont, * html .clear_cont {
    height:1px;
}

.clear_cont:after {
    clear:both !important;
    content:".";
    display:block;
    font-size:0;
    height:0;
    visibility:hidden;
}

然后将clear_cont类添加到li元素中，在此示例中还有更多要解释的内容，当我有更多时间时，我将回到这个主题

li中的浮动div在IE中无法正确显示

3 个答案: