元素背景颜色不在IE中显示

Question

我有一个包含4个<div>的页面，其中float: left在容器元素中应用了background: #ffffff。容器已经应用了/* Container */ .main-content { margin-bottom: 15px; background: #ffffff; border: 1px solid #e1e1e1; } /* Columns (Wrecked Vehicles, Welcome, Inv Search) */ .col { float: left; width: 289px; padding: 10px; margin: 5px; } /* Slider */ .slider { float: left; padding: 10px; margin: 5px; } ，但它没有像我在IE中预期的那样工作（特别是8）。它在Chrome和FireFox中运行良好。

我知道如果我从容器中移除滑块，一切都会显示为我所期望的。所以它与此有关，我只是不确定它是什么。

以下是它的外观：

以下是它在IE中的显示方式：

CSS：

<div class="main-content">
    <div class="col n1">
        ...
    </div>

    <div class="slider">
        ...
    </div>

    <div class="col n2">
        ...
    </div>

    <div class="col n3">
        ...
    </div>

    <div class="clear"></div>
</div>

HTML：

{{1}}

Answer 1

尝试将overflow:hidden添加到.main_content。背景未显示的原因是，由于所有孩子都浮动，容器的“实际”高度为零。