IE7和Firefox 3渲染區別

這是我正在開發的一個頁面的輪廓。IE7和Firefox 3渲染區別

<?xml version="1.0" encoding="UTF-8"?> 
<!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" xml:lang="en" lang="en"> 
    <head> 
    <link rel="stylesheet" href="../css/test.css" /> 
    <title>Prosperity Login</title> 
    </head> 
    <body> 
    <div id="banner"> 
    </div> 
    <div id="subbanner"> 
    </div> 
    <div id="body"> 
     <div id="colA"> 
     </div> 
     <div id="colB"> 
     <div id="B1"> 
     </div> 
     <div id="B2"> 
     </div> 
     </div> 
     <div id="colC"> 
     </div> 
     <div id="colD"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
    </body> 
</html>

而CSS：

* { 
    margin: 0px; 
    padding: 0px; 
} 



div { 
    border: 1px dotted; 
} 

#banner { 
    height: 70px; 
    width: 100%; 
} 

#subbanner { 
    height: 30px; 
    width: 100%; 
} 

#body { 
    background-color: #CCFFCC; 
    width: 80%; 
} 

#colA{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#colB{ 
    float: left; 
    height: 80px; 
    width: 24%; 
} 
#colC{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 
#colD{ 
    float: left; 
    height: 120px; 
    width: 24%; 
} 

#B1{ 
    float: right; 
    height: 48px; 
    width: 80%; 
} 

#B2{ 
    float: right; 
    height: 28px; 
    width: 80%; 
} 
#footer{ 
    height: 30px; 
    width: 100%; 
}

在Firefox 3，身體的div（綠色背景）被壓扁到幾乎沒有，而IE7渲染頁面完美。從我所知道的CSS 2.1標準（通過邁耶的O'Reilly書），浮動div應該漂浮在他們的容器塊，這顯然不是火狐3的情況。

因此，如果Firefox的渲染是兼容的，什麼是我錯過了？

來源

2009-03-01 gvkv

要注意，Opera呈現類似於Firefox。 – strager 2009-03-01 21:35:39

http://jsbin.com/eyanu – strager 2009-03-01 21:36:40

你的問題是，IE7清除父元素，使其包含浮動子。這不是應該如何呈現的。其他海報更好的解釋。

簡單的解決方法：適用overflow: hidden;您#body：

#body { 
    overflow: hidden; 
}

一個解釋見this post。

來源

2009-03-01 21:37:45 strager

與往常一樣，當在Internet Explorer和Firefox中呈現不同的頁面時，Firefox會正確呈現頁面。

身體div不應該有任何高度。它只包含浮動元素，所以沒有任何東西可以給它任何高度。浮動元素不會影響其父項的大小。 IE會這樣做，並擴展元素來包含它的孩子。這是IE的衆所周知的渲染錯誤之一。

從代碼中移除xml標籤。 doctype必須首先出現在頁面中，否則IE將忽略它。

如果您在IE 8測試版中查看頁面，它將像Firefox一樣呈現頁面。

來源

2009-03-01 21:37:14 Guffa

感謝您對文檔類型聲明的提示。 – gvkv 2009-03-01 23:32:54

+1刪除（多餘的）XML聲明。混淆IE瀏覽器，很少有很好的理由包含它。 – bobince 2009-03-01 23:55:38

沒有爲id =「body」的div分配權重或數量。放在div內的任何文本都會給它一個音量並將顏色背景渲染到合適的大小。這個問題也會在基於Webkit的瀏覽器中發揮作用（Chrome，Safari）。

要麼在文本的身體div給它的重量或添加溢出風格：隱藏;到ID爲body的div。

來源

2009-03-01 21:37:41 ahsteele

感謝大家的回答。

還有另一種解決我的問題的方案：浮動父div（id =「body」）。這直接來自邁耶的書，所以我不知道我是如何錯過它的。另一個例子就是學習！另一件事是，這也解決了另一個我沒有說的問題：我如何在身體和頁腳之間填充空白？由於在Firefox中，清除頁腳不允許使用頁邊距來在頁腳和頁腳之間留出空間。然而，浮動父元素會。

來源

2009-03-01 23:32:07 gvkv

IE7和Firefox 3渲染區別

回答

相關問題