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

为了定位第一段，我选择将其设置为绝对位置，并将“底部”属性设置为0，从而将其放在父div的底部，其高度设置为与图像相同。然而，在IE中，如果静态/相对定位元素的高度之和超过指定高度，则高度似乎完全被忽略。结果，第一段落比应该进一步下降。我发现它的最大高度和各种修复似乎没有工作。

无论如何，我不知所措，我似乎无法得到它在IE浏览器下工作，除非我把第一段分成不同的div。

任何帮助将不胜感激！

Answer 1

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