當DIV爲空時，CSS屬性被傳遞給父元素

這個問題在IE8和Chrome上發生，這讓我覺得這是一個標準問題。當DIV爲空時，CSS屬性被傳遞給父元素

我正在創建一個帶有標題和菜單的網站，使用的DIV沒有任何內容，但是在CSS中設置了背景圖像和高度/寬度。我希望內部DIV對父div有邊距，但它將邊距應用於父div。將內容放在div中糾正這一點。 IE7沒有這個問題。我不想使用 ，因爲它確實會拋出一些東西，而且看起來像是黑客。

請參見例如下面的代碼來重新創建：

<style> 

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
} 

#headerMenu{ 
    height:100px; 
    width:500px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:blue; 
    margin-top:20px; 
} 

</style> 

<div id="header"> 
    <div id="headerMenu"> 
    </div> 
</div>

如果你給父DIV的內容，甚至一個邊界佈局正常工作。我在這個網站上幾次遇到同樣的問題。我想爲菜單項列表提供一個頁邊空白，但是由於headerMenu div（它的父項）也沒有任何內容，所以它會讓該屬性起泡。

發生了什麼事？

來源

2009-08-29 Max

我想你正在跑到margin collapsing。

有關更多信息，請參閱CSS 2.1 spec on margin collapsing。

來源

2009-08-29 17:05:59 Greg

嘗試將overflow: auto添加到#header css代碼。

例如，

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
    overflow: auto; 
}

編輯：好像position: absolute作品也是如此。

來源

2009-08-29 17:04:59

我有上投主要是因爲反對票並沒有解釋;我認爲這是不公平和不禮貌的。 – 2009-08-30 01:05:46

是的，這是一個標準的事情。這就是所謂的邊緣崩潰，並且你在IE7中看不到它的原因很可能是因爲IE7弄錯了。

頁邊距有點棘手，因爲它們沒有指定元素周圍的區域，而是元素之間的最小距離。當一個子元素具有邊距並且父元素沒有填充或邊框時會發生邊距摺疊。該邊距應用於子元素和周圍元素之間，而不是在子元素和父元素之間。

由於某些瀏覽器（只有我知道的IE）無法正確處理摺疊頁邊距，所以現在應該避免使用它們。如果可能，請使用填充，或者在父級上設置填充或邊框以避免邊距摺疊。

來源

2009-08-29 17:17:02 Guffa

我只是有這個問題，以及與已將此添加CSS

border: 0px solid;

來源

2013-01-11 02:38:07 user1896534

當DIV爲空時，CSS屬性被傳遞給父元素

回答

相關問題