html - IE中不显示元素背景颜色

Question

我有一个包含 4 的页面，这些页面<div>已float: left在容器元素内应用于它们。该容器已background: #ffffff应用于它，但它不像我在 IE 中所期望的那样工作（特别是 8）。它在 Chrome 和 FireFox 中运行良好。

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

以下是它的外观：

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

CSS：

/* 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;
}

HTML：

<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>

Answer 1

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