2009-03-01 59 views
1

這是我正在開發的一個頁面的輪廓。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的渲染是兼容的,什麼是我錯過了?

+0

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

+0

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

回答

4

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

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

#body { 
    overflow: hidden; 
} 

一個解釋見this post

2

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

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

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

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

+0

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

+0

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

1

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

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

0

感謝大家的回答。

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