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

我有一个页面，其中有4个

，它们在容器元素内部应用了

float:left

。容器的

background:#ffffffff

已应用于它，但它并没有像我在IE（特别是8）中预期的那样工作。它在Chrome和FireFox中运行良好

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

下面是它的外观：

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

CSS:

HTML:

...
...
...
...

尝试将

溢出：隐藏

添加到

.main\u内容中。Backgound没有显示的原因是，由于所有的子容器都在浮动，容器的“真实”高度为零。
好吧，这是有效的。我觉得很奇怪。我认为使用
clear：两者都有将处理此问题。IE对它的解释与Chrome和FireFox有什么不同？我看不出你在定义
。清除你提供的CSS中的
样式，也许这就是它不起作用的原因。
overflow
方法更可取，因为它意味着添加元素不仅仅是为了清除浮动。它是定义的，我只是没有发布它。不过，溢出方法并不总是理想的，因为在某些情况下可能需要允许内容溢出。我进一步研究了这个问题，在css-tricks.com上找到了一些很好的答案。我只是不知道我是这样处理事情的。
/* 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;
}

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