爲什麼IE7在清除浮動時會導致保證金錯誤？

我有一個非常簡單的HTML頁面（驗證爲XHTML 1.0 Strict標準）：爲什麼IE7在清除浮動時會導致保證金錯誤？

<div class="news-result"> 
    <h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span> 
    <p>Some text...</p> 
</div>

與下面的CSS：

.news-result { 
    overflow: hidden; 
    padding: 30px 0 20px; 
} 

.news-result h2 { 
    float: left; 
    margin: 0 10px 0 0; 
} 

.news-result span.date { 
    margin: 1px 0 0; 
    float : left; 
} 

.news-result p { 
    padding: 3px 0 0 0; 
    clear: left; 
}

呈現在IE6或FF3此頁面呈現完美（標題和日期在一行，後面是段落）。然而，在IE7中，標題和日期與段落之間有很大的距離。

我們有一個簡單的重置，可清除每個元素上的每個邊距和填充。

刪除日期元素上的浮點數可修復此問題，就像在段落上設置zoom: 1或刪除容器上的overflow: hidden一樣，但都不理想。爲什麼浮動後跟一個段落會觸發這個額外的頂部邊距，僅在IE7上？

來源

2009-01-07 Kamiel Wanrooij

我在IE6,7和8B2中看到額外的空白。

看起來，IE的<p>標籤上有一個非零的上邊距。

我能通過進行以下更改刪除IE中的空白：

.news-result p { 
    margin-top: 0; 
    padding: 3px 0 0 0; 
    clear: left; 
}

的變化似乎並沒有在Firefox 2或3，歌劇9.63或Safari任何負面的副作用爲Windows 3.2.1。

來源

2009-01-07 17:06:44

利用css重置ala Eric Meyer：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/將有助於最大限度地減少您可能遇到的一些瀏覽器差異。 – Traingamer 2009-01-07 19:22:38

我們已經重置了，忘了提及...謝謝！ – 2009-01-08 15:12:39

我可以假設你有一個文檔類型？

但是，將h2和跨度更改爲顯示：inline;也應該清理你的問題。

編輯---添加hasLayout的

瞭解內聯並不總是一個選項，這裏是一個article explaining what's going on。

基本上你必須給<p> hasLayout。有很多方法可以做到這一點，我不喜歡使用<div class="clearall"></div>和喜歡使用overflow: hidden;或zoom: 1;

來源

2009-01-07 17:12:11

我們的doctype是XHTML 1.0 Strict（並驗證@ W3C）。 – 2009-01-08 15:13:41

因爲IE7是stillfloat bugged，我害怕。

（在鏈接修復）

來源

2009-01-07 17:14:35 annakata

只是浮動DIV和清格之間添加 。這將消除差距。

來源

2012-07-30 13:51:36

爲什麼IE7在清除浮動時會導致保證金錯誤？

回答

相關問題