IE6和IE7不能正確處理具有高度屬性的元素的邊距

我在div中有一個h2。他們都有邊界。 h2有高度屬性和邊距。當我在IE6，IE7或IE8兼容性視圖中查看我的頁面時，h2一直位於div頂部，就好像頁邊距爲0.但是，如果我在任何其他瀏覽器中查看它，h2有一些空間高於它，就像我所期望的那樣。IE6和IE7不能正確處理具有高度屬性的元素的邊距

誰能告訴我爲什麼會發生這種情況以及如何處理它。我正在嘗試使頁面在IE中呈現，就像它在Firefox中一樣，而不將高度設置爲自動。

這是您可以測試以顯示問題的頁面。嘗試在IE6還是IE7瀏覽它，然後嘗試在其他瀏覽器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<title>CSS margin test</title> 
<style type="text/css"> 
div { 
    border: solid blue 1px} 
h2 { 
    height:33px; margin:80px 0 0; border: solid red 1px} 
</style> 
</head> 
<body> 
<div> 
    <h2>test</h2> 
</div> 
</body></html>

來源

2009-11-05 Elias Zamaria

使用「縮放：1」 CSS屬性，迫使適當的佈局在IE中。這是IE錯誤的常見解決方案。把它放在DIV解決您的問題：

div { 
    border: solid blue 1px; 
    zoom: 1; 
}

通用的修復也有可能：

* { 
    zoom: 1; 
}

谷歌「hasLayout的」獲取更多信息。

來源

2009-11-05 19:26:44

謝謝。有效。我已經閱讀了很多關於縮放和hasLayout的文章，但不知怎的，它並沒有發生，它會修復這個bug。 – 2009-11-05 19:30:53

這是exaclty你在找什麼？不要忘記將此答案標記爲已接受，以便其他人可以直接從中受益！ – GmonC 2009-11-05 19:37:15

請注意，將hasLayout賦予具有通配符選擇器的所有元素可能會導致其他錯誤。當一個元素行爲不當時，我只會給hasLayout。 – CalebD 2009-11-05 20:05:41

IE6和IE7不能正確處理具有高度屬性的元素的邊距

回答

相關問題