IE（所有版本）在内容溢出时忽略高度

Question

编辑：我设法使用<meta http-equiv="X-UA-Compatible" content="IE=7" />让它在IE 8 + 9上运行，但问题仍然存在于6/7。

我正试图达到这个效果：

http://img860.imageshack.us/img860/3905/example.png

除了IE（所有版本包括9）之外，我在所有浏览器中都设法做到了这一点，没有任何额外的标记：

<div id="content">
    <p class="firstPara">Para1</p>
    <p>Para2</p>
    <p>Para3</p>
</div> 

使用这个CSS：

#content {
width: 700px;
height: 232px;
position: relative;
background: #ccc url('assets/headerImage.png') left top no-repeat;
}

#content p {
background-color: #fafafa;
position: relative;
top: 232px;
width: 440px;
padding: 10px;
}

#content p.firstPara {
position: absolute;
top: auto;
bottom: 0;
background: #eee url('assets/headerTextBack.png') left bottom no-repeat;
}

为了定位第一段，我选择将其设置为绝对位置并将“bottom”属性设置为0，从而将其置于父div的底部，其高度已设置为与图片。然而，在IE中，如果静态/相对定位元素的高度之和超过指定高度，则似乎完全忽略高度。结果，第一段比它应该更进一步。我找到的最大高度和各种修复似乎不起作用。

无论如何我都不知所措，除非我将第一段分成不同的div，否则我似乎无法在IE下工作。

非常感谢任何帮助！

Answer 1

将overflow:hidden;添加到您的#content部分。