在IE 6/7/8：HTML插入<p></p>（用jQuery）不符合設置的<p></p>

Question

所以我有這個標記寬度：

<div id="text-container"> 
    <p></p> 
</div> 

這種風格（冗餘，我知道）：

#text-container {display:block: width:220px; height:280px;} 
#text-container p {display:block; width:220px; height:60px;} 

和jQuery的該位插入簡單的內容到段：

$("#text-container p").text(data); 

適用於Firefox。文字包裝並保留在段落的設定寬度內。但不是在任何版本的IE中。在IE 7/8中，即使段落本身遵守設定的尺寸，文本也會從段落水平延伸。在IE 6中，文本不僅水平溢出，而且延伸段落。我試過使用.html而不是.text，但那不起作用。不理想。我提到不理想嗎？有誰知道如何解決這個問題？謝謝。

Answer 1

這是a known bug in IE6：

IE6和更低的工具溢出：可見不正確。

正確的行爲是，具有overflow：visible的元素變得和CSS訂單一樣高和寬，並且任何不符合要求的內容都會溢出，必要時重疊後面的內容。

注意，你在IE7和IE8看到的行爲可能被認爲是正確的（雖然並不十分友好的，至少如果文本沒有換，當它可能套）。

要達到一致的行爲，嘗試Ryan McGeary's suggestion：添加overflow: hidden;到元素的樣式，你想限制：

 
#text-container {display:block; width:220px; height:280px; overflow:hidden;} 
#text-container p {display:block; width:220px; height:60px; overflow:hidden;} 

請注意，我還你原有的風格糾正一個錯誤的冒號 - 不知道，如果那是在你的實際代碼中，或者只是在撰寫你的問題時出現錯字...

Answer 2

嘗試增加overflow: hidden;段落元素的樣式

#text-container p {display:block; width:220px; height:60px; overflow:hidden;}