4 
<div style="float: left;
            height: 20%;
            width: 70%;"</div>
<div style="float: right;
            height: 20%;
            width: 30%;">         </div>

Chrome では、2 つの部門が同じ行にあります。しかし、2 つの div の間には小さなギャップがあります。しかし、Firefox にはギャップがありません。なぜこうなった？これに対する解決策はありますか？

4

1 に答える 1

8

Chrome はすべての幅を整数ピクセルに丸めます。コンテナーの幅が 10 で割り切れない限り、フロートの幅が丸められるため、実際には 30% と 70% ではなく、結果としてそれらの間にスペースができることを意味します。

Gecko は分数ピクセルでレイアウト計算を行うため、幅をより正確に表すことができ、ペイント時にピクセル グリッドにスナップして、この種の継ぎ目を回避できます。

考えられる解決策は、コンテナーの幅が 10px の倍数であることを確認し、整数ピクセルへの丸めの動作について WebKit チームに文句を言うことです。または両方。

于 2011-07-08T02:48:52.447 に答える