CSS體12格的設計問題

是否有可能，有些瀏覽器計算％寬度不同？CSS體12格的設計問題

下面是代碼：http://jsfiddle.net/yuliantoadi/9eqMg/2/

HTML：

<div class="grid_6"> 
grid 6 
</div> 
<div class="grid_6"> 
grid 6 
</div> 
<div class="grid_1"> 
grid 1 
</div> 
<div class="grid_2"> 
grid 2 
</div> 
<div class="grid_4"> 
grid 4 
</div> 
<div class="grid_5"> 
grid 5 
</div>

CSS：

[class^=grid_]{ 
    float:left; 
    margin-left:1%; 
    margin-right:1%; 
    margin-bottom:5px; 
    background-color:red; 
} 
.grid_1 { 
    width:6.333%; 
} 
.grid_2{ 
    width:14.666% 
} 
.grid_4{ 
    width:31.333% 
} 
.grid_5{ 
    width:39.666%; 
} 
.grid_6{ 
    width:48%; 
}

12格的設計是在Firefox OK，然後我檢查在Safari中，我發現問題。你可以看到它，如果你在Safari中打開或Chrome的代碼，有網後一點空間5.

來源

2011-06-22 yoel

是U使用http://www.designinfluences.com/fluid960gs/！？ – Synxmax

是的，我試圖實現12網格設計 – yoel

我的經驗是，在百分比寬度的處理方式不同 - 有些瀏覽器圍捕，一些回合下來，有的只是從實際PIXEL寬度中移除任何尾隨小數（記住，您無法渲染半個像素）。但問問我爲什麼或什麼時候。

來源

2011-06-22 06:57:43

我會說這是發生，因爲Safari瀏覽器是四捨五入的39.666％UP，而Firefox是四捨五入下來。我會建議強制四捨五入。而不是去3個小數位，沒有轉到。但是，最終可能會出現不均勻的網格。試一試，讓我知道。

來源

2011-06-22 07:02:13 Ryan

firefox四捨五入39.666％至38，你在哪裏得到這些信息？ – Synxmax

我沒有說它是四捨五入到38.我只是說它四捨五入，這是一個受過教育的猜測。 – Ryan

有瀏覽器的當前實現子像素的問題。瞭解更多：ejohn.org/blog/sub-pixel-problems-in-css/

來源

2011-09-23 09:33:12 donleche

CSS體12格的設計問題

回答

相關問題