我有一个包含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}}
答案 0 :(得分:2)
尝试将overflow:hidden
添加到.main_content
。背景未显示的原因是,由于所有孩子都浮动,容器的“实际”高度为零。