유체 격자 문제

첫 번째 유체 격자 배치에 문제가 있습니다. 이 레이아웃은 대부분의 브라우저에서 위치가 어긋나 있습니다 (폭이 다양 함). 파이어 폭스에서만 작동합니다 (예 : 크롬이나 오페라 제외). 이유를 모르겠습니다.유체 격자 문제

감사

<!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

당신은 바른 길에 있습니다. 다른 렌더링의 이유는 모든 브라우저, 특히 IE에서 문제가되는 pixel rounding과 관련이 있습니다.

호환성 제안을 보려면 this fiddle을 확인하십시오.

출처

2011-08-18 00:03:56

답변

관련 문제