IE7保證金摺疊爲填充

爲什麼在下面的示例中，外部div的填充已摺疊到內部div的邊距？IE7保證金摺疊爲填充

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Col Padding</title> 
     <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' /> 
     <style type='text/css'> 
      .padding 
      { 
       padding: 50px; 
       background-color: green; 
       zoom: 1; 
       width: 500px; 
      } 
      .margin 
      { 
       margin: 100px; 
       background-color: blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div class='padding'><div class='margin'>Content</div></div> 
    </body> 
</html>

這是IE 7.0.5730.13

這是FF 6.0.2

@大衛 - IDK的我只有IE7
@Faust - 我現在附上截圖。我用XRAY檢查它們，看看它們是不同的。
@veritas - 更改DOCTYPES似乎沒有改變任何東西。我檢查了IE7在標準模式下渲染。

來源

2011-10-05 John K

是嗎？我也注意到了一個IE7標籤，這僅僅發生在IE7中嗎？ – David

在兼容性視圖模式（粗略的IE7模擬）中，IE8的行爲看起來與FireFox + Chrome相同。如果你有實際的IE7，你可以發佈一個屏幕截圖嗎？這是我所期望的 - 或者是你想要解釋什麼？ – Faust

也許使用舊的文檔類型會有幫助嗎？ IE7不明白HTML5 – veritas

.padding 
     { 
      padding: 50px; 
      background-color: green; 
      zoom: 1; 
      width: 500px; 
      overflow:hidden; /* blocks margin collapse */ 
     }

編輯：需要一個解決辦法

<style type="text/css"> 
     .padding 
     { 
      background-color: green; 
      width: 500px; 
     } 
     .p 
     { 
      padding:10px; 
     } 
     .margin 
     { 
      margin: 10px; 
      background-color: blue; 
     } 
    </style> 

    <div class="padding"> 
    <div class="p"> 
     <div class="margin">Content</div> 
    </div> 
</div>

沒有那麼順便說好......我不認爲有更好的東西，我試過很多黑客

的

：（

來源

2011-10-06 17:17:09

試過這個。它沒有工作。 –

我看到了，我也在嘗試...... fu **** Internet Explorer – 2011-10-06 17:32:10

@JohnK附加了一些代碼，不太好用，可能需要包裝元素。我很感興趣，看看這個sh * t是否有一些解決方法！投了個問題 – 2011-10-06 17:38:13

下面的工作，但我不喜歡它。我不喜歡手動設置.margin中的行高，我不喜歡不得不放入一個&

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Col Padding</title> 
     <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' /> 
     <style type='text/css'> 
      .padding 
      { 
       padding: 50px; 
       background-color: green; 
       width: 500px; 
       line-height: 0px; 
      } 
      .margin 
      { 
       margin: 100px; 
       background-color: blue; 
       line-height: 16px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class='padding'>&nbsp;<div class='margin'>Content</div></div> 
    </body> 
</html>

任何人都可以改進或提供更好的解決方案嗎？

來源

2011-10-06 18:11:56

我爲這個問題搜索了一下，沒有發現任何東西。因爲當你需要使用父母的填充和孩子的邊距時，情況很少。但是如果對你來說不可避免的話，可能是最好將150px padding-top應用於父元素，特別是IE6,7？在我看來，它比插入空間更好，將行高設置爲0，並將此屬性重新定義爲所有內部元素。

.padding 
     { 
      padding: 50px; 
      background-color: green; 
      width: 500px; 
     } 
*html .padding 
     { 
      padding: 150px; 
     } 
.margin 
     { 
      margin: 100px; 
      background-color: blue; 
     }

來源

2011-10-17 15:32:50 user907860

這似乎不起作用。另外，我看不到* html .padding規則是什麼，因爲它將被.padding規則覆蓋。 –

試試這個

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html> 
      <head> 
       <title>Col Padding</title> 
       <link rel='stylesheet' type='text/css' href='http://meyerweb.com/eric/tools/css/reset/reset.css' /> 
       <style type='text/css'> 
        body{ 
         font-size:1em; 
        } 
        .padding 
        { 
         padding: 150px; 
         background-color: green; 
         width: 500px; 
         line-height: 0px; 
        } 
        .padding span 
        { 
         background-color: blue; 
         padding:15px 5px; 
         display:block; 
         color:#fff; 
        } 
       </style> 
      </head> 
      <body> 
       <div class='padding'><span>Content</span></div> 
      </body> 
     </html>

來源

2011-10-18 07:26:22 Bala

雖然它可以完全避免邊距與填充問題，但它只能作爲替代方案，而不是答案。 –

嘗試增加float:left。

不是最好的選擇，但有時有效。

來源

2011-10-25 20:17:25 MCSI

IE7保證金摺疊爲填充

回答

相關問題