1

一部のブラウザで % 幅の計算方法が異なる可能性はありますか?

コードは次のとおりです。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 で問題ありませんが、Safari で確認したところ、問題が見つかりました。Safari または Chrome でコードを開くと、グリッド 5 の後に少しスペースがあることがわかります。

4

3 に答える 3

1

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

于 2011-09-23T09:33:12.450 に答える
1

私の経験では、パーセンテージの幅は異なる方法で処理されます.一部のブラウザーは切り上げ、切り捨て、実際のピクセル幅から末尾の小数点以下を削除するだけです (0.5 ピクセルをレンダリングすることはできないことに注意してください)。しかし、なぜ、いつなのかは聞かないでください。

于 2011-06-22T06:57:43.513 に答える
1

これは、Safari が 39.666% を切り上げているのに対し、Firefox が切り下げているために発生していると言えます。丸めを強制することをお勧めします。小数点以下 3 桁に移動する代わりに、なしに移動します。ただし、不均一なグリッドになる可能性があります。試してみてください。

于 2011-06-22T07:02:13.737 に答える