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部分。