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

为了定位第一段，我选择将其设置为绝对位置并将“底部”属性设置为 0，从而将其放置在高度设置为相同的父 div 的底部图片。但是在 IE 中，如果静态/相对定位元素的高度总和超过指定高度，则似乎完全忽略高度。结果，第一段比它应该的更悬垂。我发现的最大高度和各种修复似乎都不起作用。

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

任何帮助将不胜感激！

Answer 1

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