流體網格問題

我的第一個流體網格佈局有問題。在大多數瀏覽器中，這種佈局看起來有些偏移（變化的寬度）。它只適用於Firefox。（不在例如鉻或歌劇）我不明白爲什麼。流體網格問題

感謝

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Grid Test</title> 
    <style type="text/css"> 
     .col { 
     float:left; 
     background-color: grey; 
     margin-left: 1%; 
     margin-right: 1%; 
     margin-top: 1px; 
     margin-bottom: 1px; 
     height: 50px; 
     text-align: center; 
     } 

     .one_quater { 
     width: 23%; 
     } 
     .two_quater { 
     width: 48%; 
     } 
     .three_quater { 
     width: 73%; 
     } 

     .one_thirds { 
     width: 31.333%; 
     } 
     .two_thirds { 
     width: 64.666%; 
     } 

     .one_half{ 
     width: 48%; 
     } 

     .one_full{ 
     width: 98%; 
     } 

     .clear { 
     clear: both; 
     display: block; 
     overflow: hidden; 
     visibility: hidden; 
     width: 0; 
     height: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="row"> 
     <div class="col one_full"> 
     1/1 
     </div> 
    </div> 
    <div class="clear"></div> 

    <div class="row"> 
     <div class="col one_thirds"> 
     1/3 
     </div> 
     <div class="col one_thirds"> 
     1/3 
     </div> 
     <div class="col one_thirds"> 
     1/3 
     </div> 
     <div class="clear"></div> 
    </div> 


    <div class="row"> 
     <div class="col two_thirds"> 
     2/3 
     </div> 
     <div class="col one_thirds"> 
     1/3 
     </div> 
     <div class="clear"></div> 
    </div> 


    <div class="row"> 
     <div class="col one_thirds"> 
     1/3 
     </div> 
     <div class="col two_thirds"> 
     2/3 
     </div> 
     <div class="clear"></div> 
    </div> 


    <div class="row"> 
     <div class="col one_half"> 
     1/2 
     </div> 
     <div class="col one_half"> 
     1/2 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="row"> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="row"> 
     <div class="col two_quater"> 
     2/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="clear"></div> 
    </div> 


    <div class="row"> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col two_quater"> 
     2/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="row"> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="clear"></div> 
    </div> 


    <div class="row"> 
     <div class="col one_quater"> 
     1/4 
     </div> 
     <div class="col three_quater"> 
     3/4 
     </div> 
     <div class="clear"></div> 
    </div> 

    </body> 
</html>

來源

2011-08-17 mm1

你是在正確的軌道上。不同渲染的原因與pixel rounding有關，這對所有瀏覽器都是個問題，特別是IE。

檢出this fiddle查看兼容性建議

來源

2011-08-18 00:03:56

流體網格問題

回答

相關問題