爲什麼Safari 4/mac不在這個嵌套div中渲染頂部和底部邊距？

除非我添加邊框，否則Safari 4似乎會忽略元素邊距。爲什麼Safari 4/mac不在這個嵌套div中渲染頂部和底部邊距？

以下示例呈現左右邊距，但不顯示頂部或底部。

添加邊框後，它會按預期進行渲染。我做錯了什麼，或者我將不得不添加邊界(albeit transparent ones)到每個有邊距的元素只適用於Safari？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>testing</title> 
<style> 
    body {background-color:#666;} 
    div {display:block; position:relative; margin:0; padding:0;} 
    .background {background-color:#990000;} 
    .foreground {background-color:#fff; margin:10px; padding:10px;} 
</style> 
</head> 
<body> 
    <div class='background'> 
     <div class='foreground'> 
     foreground 
     </div> 
    </div> 
</body> 
</html>

來源

2010-10-13 Moob

只是一個側面說明，display：block在div上是多餘的，因爲這是默認顯示。我也不會將默認設置爲position：相對於divs，我記得過去有過這個問題（儘管不知道爲什麼）只在需要時才使用它。另外，我認爲div的默認填充/邊距實際上是0，所以你可以忽略整個div的CSS聲明而不會產生不良影響。 – brad 2010-10-13 15:31:58

@brad是的，謝謝，但我想爲這個例子指出它。此外，定義位置：當你想相對定位（通常是）時，相對位置很有用 – Moob 2010-10-13 15:36:54

這是一個正常的怪異行爲調用邊際（編輯，對不起我是法國人）崩潰。要簡單地避免它在容器上添加overflow:auto;。

.background {background-color:#990000; overflow:auto;}

來源

2010-10-13 15:10:11 MatTheCat

是的，你的邊距是* collapsing *，這是正常的。 [本文]（http://www.complexspiral.com/publications/uncollapsing-margins/）可能有助於解釋事情。 – 2010-10-13 15:16:58

謝謝。有趣的文章 - 這可能是正確的，但這並不正確！所有其他瀏覽器似乎都瞭解邊界的含義，並在相鄰邊緣元素的情況下將它們組合起來。 – Moob 2010-10-13 15:33:19

@Moob這是否真的可以像所有其他瀏覽器一樣運行？我不希望它...... Firefox似乎用你的示例代碼（http://jsfiddle.net/8tbjW/）崩潰了頂部/底部邊距。通常情況下，這只是IE瀏覽器的破解，儘管我確實認爲非崩潰行爲有時看起來更明智。 – 2010-10-13 15:58:03

它被稱爲邊緣崩潰。當頂部和底部邊緣相互接觸時，邊距將組合成兩者中較大的一個。

當您添加邊框時，「正確」工作的原因是您爲邊距創建了1px分隔符，因此它們不再摺疊。有趣的是，如果您添加了沒有高度/邊框的空白div，則邊距仍然會因爲div佔用0px空間而摺疊。

來源

2010-10-13 15:16:19 Moses

好的，但在本例中，組合邊距爲0 + 10px = 10px。謝謝你的信息。 – Moob 2010-10-13 15:28:43

爲什麼Safari 4/mac不在這個嵌套div中渲染頂部和底部邊距？

回答

相關問題