html - IE(所有版本)内容溢出时忽略高度

Question

编辑:我设法让它在 IE 8+9 上使用 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 运行但问题仍然存在于 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 的底部，父 div 的高度已设置为与图像。但是在 IE 中，如果静态/相对定位元素的高度总和超过指定高度，则高度似乎会被完全忽略。结果，第一段比它应有的悬垂得更远。最大高度和我为它找到的各种修复似乎都不起作用。

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

如有任何帮助，我们将不胜感激!

Answer 1

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