IE8 - 集裝箱用的margin-top：10px的無餘量

編輯：這種情況只有在IE8，它在IE7，Firefox，歌劇等IE8 - 集裝箱用的margin-top：10px的無餘量

首先的工作得很好，這裏是我在Photoshop做照片以演示我的問題：http://richardknop.com/pict.jpg

現在你應該對我的問題有所瞭解。下面是我使用的標記的簡化版本（我遺漏了最不相關的內容）：

<div class="left"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="right"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="clear"></div> 
<div class="box"> 
    // 
    // NOW THIS BOX HAS NO TOP MARGIN 
    // 
</div> 
<div class="box"> 
    // box content 
</div>

和CSS樣式是這樣的：

.clear { 
    clear: both; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.box { 
    overflow: auto; 
    margin-top: 10px; 
}

很顯然，我已經離開了所有irreevant風格像邊框，背景顏色和圖像，字體大小等。我只保留重要的東西。

任何想法可能是什麼問題？

來源

2009-08-07 Richard Knop

您是否有DOCTYPE設置（例如，您在IE8標準模式下運行？或怪癖？） – scunliffe 2009-08-07 17:15:03

是的，我有：<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1。0嚴格// EN「」http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd「> – 2009-08-07 17:17:37

我沒有仔細看過你的問題，但不知道是否可能是由於邊距崩潰，例如http://www.andybudd.com/archives/2003/11/no_margin_for_error/ – ChrisW 2009-08-07 17:25:30

看看padding-top: 10px的作品。這可能是保證金嘗試從頁面的頂部開始。

來源

2009-08-07 17:13:55 Justin

我無法使用padding-top：10px;因爲這些框已經有背景顏色，並且它們已經有了padding：10px，所以它們內部的內容 – 2009-08-07 17:19:35

嘗試在清晰div中加入像' '這樣的填充符號，我記得在某些早期版本中有一個需要類似內容的錯誤 – Justin 2009-08-07 17:24:40

添加解決了這個問題:)我只需要添加高度：0 ;到.clear類 – 2009-08-07 17:59:35

嘗試關閉您的清除分區。

<div class="clear"></div>

來源

2009-08-07 17:14:54 idrumgood

這是一個問題，但不是問題。將「clear」類添加到box div仍然會清除任何事情。 – Justin 2009-08-07 17:17:28

我只是忘記關閉它，它在源代碼中關閉。我編輯了我的帖子。 – 2009-08-07 17:18:19

我不太明白這個辦法。您可以將<div> s用右邊和左邊的類別包裝到另一個<div>中，並將overflow: hidden，width: 100%應用於其中，以便浮動元素下面的元素能夠正確顯示。

來源

2009-08-07 17:30:32 dalizard

是的，但我更喜歡使用最小標記，並且只使用絕對必要的很多div。這隻會添加另一個沒有語義含義的元素，甚至不需要樣式。 – 2009-08-07 18:01:02

@理查德，我會說

是完全一樣的。我個人會選擇溢出解決方案，因爲HTML看起來更好。但那是我。 – dalizard 2009-08-07 20:50:52

enter code here嘗試使用具有溢出寬度的容器：隱藏浮動div的周圍，並刪除清除的div。

<div id="container"> 
     <div class="left">  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
     <div class="right">  
      <div class="box">  // box content right </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
    </div> 
    <div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div> 
<div class="box"> // box content</div>

而CSS

#container { width: 100%; overflow: hidden; }

（對不起，我離開了IE7我的工作機上進行測試，所以我無法驗證）

來源

2009-08-07 17:32:24 ScottE

並添加溢出：隱藏，它會工作:-) – dalizard 2009-08-07 17:33:27

正確的，剛剛抓住我在這樣做的過程中！ – ScottE 2009-08-07 17:34:04

我覺得這是一個IE8的錯誤。與浮動左右div的兄弟元素有關。無論是否有結算div，最終未展開的元素都會在IE8中失去頂部邊距。

我們已經進行了測試，只有IE8得到一個錯誤：

http://www.inventpartners.com/content/ie8_margin_top_bug

我們還提出了3個解決方案。

來源

2009-08-08 09:40:30

良好的調查。棘手的話題是內部清除崩潰邊緣。在您的示例中，所有3個不是浮動div的上邊距都摺疊起來，所以第三個邊緣的上邊距不會丟失;它與第一個崩潰了。沒有明確的屬性，IE8的行爲絕對是正確的，和其他瀏覽器一致。增加明確的財產應該做的事情並不那麼清楚。檢查Opera的行爲。順便說一句，你不需要兩個花車來演示。 – 2009-08-08 16:08:01

有趣。我沒有這樣想過。 IE8顯然比壁虎更嚴格的邊際崩潰。我已經寫過關於另一個頁邊距崩潰的問題：在壁虎中表格更好（不同地）在IE8 我懷疑會有更多的這些邊緣崩潰不一致，這將導致HTML開發人員未來幾個月！ – 2009-08-10 08:47:40

嗨buti-oxa - 我在我的文章中增加了一個腳註，詳細描述了你對這個問題的分析。希望沒關係。讓我知道你是否希望我改變它。 – 2009-08-10 08:55:49

我沒有IE8與我...但你有沒有嘗試添加明確：既對底部的div和增加一個底部邊距的頂級浮動之一？我敢肯定，這將實現相同的效果，沒有任何額外的div。

來源

2009-08-08 16:23:23 kmiyashiro

我有類似的問題，由馬特布拉德利提供的解決方案沒有爲我工作（但感謝張貼無論如何！）。我想在h1元素上有margin-top：10px。

我想出的解決方案是在h1元素中添加position：relative，top：10px和margin-top：0px。

來源

2011-01-24 08:00:39 bluesun

IE8 - 集裝箱用的margin-top：10px的無餘量

回答

相關問題