爲什麼在這些浮動的Div中FF和IE之間還有額外的「空白」？

爲什麼在兩個浮動塊之間FireFox有這麼多的額外空間？爲什麼在這些浮動的Div中FF和IE之間還有額外的「空白」？

<html> 
<head> 
<style type="text/css"> 
    #Container-900px { 
    width:900px; 
    padding: 10px; 
    border: 1px solid #CCCCCC; 
    } 
    #Container-900px .left { float:left; width:435px; height:300px; } 
    #Container-900px .right { float:right; width:435px; height:300px; } 

    /* float clearing for IE6 */ 
    * html .clearfix{ 
    height: 1%; 
    overflow: visible; 
    } 

    /* float clearing for IE7 */ 
    *+html .clearfix{ 
    min-height: 1%; 
    } 

    /* float clearing for everyone else */ 
    .clearfix:after{ 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    font-size: 0; 
    } 

    /* CSS3 Styles */ 
    #Container-900px { 
    -moz-box-shadow: 0px 0px 12px #CCC; /* Firefox */ 
     -webkit-box-shadow: 0px 10px 12px #CCC; /* Safari, Chrome */ 
     box-shadow: 0px 0px 12px #CCC; /* CSS3 */ 
    } 
    #Container-900px .left { 
    background-color: rgb(238, 238, 238); 
    } 
    #Container-900px .right { 
     background-color: rgb(238, 238, 238); 
     } 
</style> 
</head> 
<body> 
<h1>Software</h1> 
<div id="Container-900px"> 
    <div class="left"> 

    </div> 
    <div class="right"> 

    </div> 
<div class="clearfix">&nbsp;</div> 
</div> 
</body> 
</html>

來源

2010-02-03 gogogadgetinternet

由於doctype省略了會導致IE在quirksmode渲染（這是壞的）。如果您使用W3 HTML validator進行了驗證，那麼它也應該對錯誤的文檔類型進行錯誤處理。

添加嚴格 DOCTYPE應該使HTML和CSS的行爲在所有主要的瀏覽器是一致的（姑且認爲MSIE仍然具有many bugs留給潛在修復的事實）。

<!doctype html> 
<html lang="en"> 
    <!-- here you go --> 
</html>

此外也給#Container-900px .left和#Container-900px .right的445px的寬度，使得它很好地沿所述容器的10px的餘量適合。

#Container-900px .left { float:left; width:445px; height:300px; } 
#Container-900px .right { float:right; width:445px; height:300px; }

這種方式在所有瀏覽器中看起來都很不錯並且相同。

來源

2010-02-03 18:47:15 BalusC

相比什麼？浮動元素的大小爲435px，其間爲30px，預計總計爲900px。它在FF，Opera和Chrome中看起來一樣。我沒有IE瀏覽器。也許你錯過了一個文檔類型？

來源

2010-02-03 18:50:31 Rob

使用css reset：http://meyerweb.com/eric/tools/css/reset/ 可能會有所幫助。它「標準化」瀏覽器之間的默認呈現。

來源

2010-02-03 18:53:11 mhughes

爲什麼在這些浮動的Div中FF和IE之間還有額外的「空白」？

回答

相關問題