html - CSS - ボックス モデル - Chrome でのみ動作

Question

Bootstrap の css を使用して単純な流動的なレイアウトを作成した後、 Chrome を除くすべてのブラウザーでレイアウトが右側に整列していないことに気付きました。

この jsFiddle を見てみましょう: http://jsfiddle.net/47JND/5/ たとえば、firefox や IE9 で。

これに気付くでしょう：

Chrome との差はわずか 1 ピクセル程度です (以下を参照)。

次の box-sizing プロパティを使用していることにも注意してください。

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 

足りないものはありますか？何が原因なのかを突き止めるために、考えられることはすべて試しました！

Answer 1

これがサブピクセル レンダリングの問題であることはほぼ確実です。幅は最も近いピクセルに丸められているため、親の幅に基づいて異なる幅になります。

Chromeでも1ピクセルのオーバーラップが見られます。