css - IE8 : getting DIVs to float left

Question

在 IE8 中，我试图与一个父 div 并排显示 4 个子 div。我希望父 div 溢出并水平滚动，并且子 div 也水平相邻。谢谢

HTML:

<div id="a">
    <div class="b">One</div>
    <div class="b">Two</div>
    <div class="b">Three</div>
    <div class="b">Four</div>
</div>

和 CSS:

#a{
    position:relative;
    height:130px;
    width:800px;  
    background:purple;
    overflow:auto;
}
.b{
    position:relative;
    display:inline-block;
    height:100px;
    width:400px;  
    background:red;
    border:1px solid #000000; 
    float:left;
}

Answer 1

以下是我的建议:

1. 对重复元素使用类。 ids 是唯一的，但 classes 可以多次使用。
2. 使用 inline-block 代替 float，而不是另外使用。
3. 在容器上设置white-space:nowrap以防止 child 从包装。

<div id="a">
    <div class="b">One</div>
    <div class="b">Two</div>
    <div class="b">Three</div>
    <div class="b">Four</div>
</div>

#a{
    height:130px;
    width:800px;
    background:purple;
    overflow:auto;
    white-space:nowrap;
}
.b{
    height:100px;
    width:400px;  
    background:red;
    border:1px solid #000000;
    display:inline-block;
}

http://jsfiddle.net/X2Rjn/2/

http://cssdesk.com/exMH4 (对于那些看不到jsfiddle的人)