CSS流体12グリッドデザインの問題

Question

一部のブラウザで％幅を計算する方法はありますか？ CSS

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

：ここ

コードです：http://jsfiddle.net/yuliantoadi/9eqMg/2/

HTMLグリッドデザインはFirefoxでokです

[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、その後、私はSafariでチェックして、私が見つかりました。問題。 SafariやChromeでコードを開くと、グリッド5の後ろに少しスペースがあります。

Answer 1

私の経験では、その幅はパーセンテージで扱われています - いくつかのブラウザは丸められ、末尾の小数点を実際のピクセル幅から削除してください（ピクセルの半分はレンダリングできません）。 しかし、私に理由や理由は問いません。

Answer 2

Safariが39.666％UPを丸めているのに対して、Firefoxはそれを丸めているので、私はこれが起こっていると言います。丸めを強くお勧めします。小数点以下3桁に行くのではなく、何もしないでください。しかし、あなたは不均一なグリッドに終わるかもしれません。試してみてください。

Answer 3

ブラウザの現在の実装にはサブピクセルの問題があります。続きを読む：ejohn.org/blog/sub-pixel-problems-in-css/