浮動小数点使用時にChromeとOperaが失敗する

Question

要素の寸法を指定するときに浮動小数点数を使用しています。これはjsfiddleを参照してくださいjsfiddle.net/yMTGJしかし、画像を見るとわかるように、ChromeとOperaの両方が適切な幅を設定できず、結果として2つのdivの間に1ピクセルのギャップがあります。i.stack.imgur.com/O9ZxW.png ChromeとOperaはfloatを正しく処理できませんか？なぜ1ピクセルのギャップがあるのですか？

Answer 1

これは、幅を466.5pxと指定しているために発生します。これは、他のブラウザ（たとえばFirefox）によって467pxまでラウンドセットされます。クロムはこれを正しく表示しようとするので、赤と黄の組み合わせで表示される1ピクセルの線があります（ブラウザを混乱させるように見えますが、ギャップはありません）。

これを避けるには、ハーフピクセルを使用して寸法を指定しないでください（例はどのように見えますか？クロムは正確に何を期待していますか、ハーフピクセルを使用するかどうかわかりません）。

私は外側のdivの幅を932pxに調整し、内側のものは466pxに調整しました。これはクロームで完全に機能します。

EDIT：
あなたが933pxの幅を必要とする場合は、すべてのブラウザで同じ表示になるだろう、別の解決策があるようにする必要があり、独自のギャップに建設されるだろう：あなたの問題はhttp://jsfiddle.net/eS7Qd/

Answer 2

あります：width: 466.5px;小数点は普遍的にサポートされていません。いくつかの情報と可能な解：http://www.latentmotion.com/browsers-trim-pixel-decimals/

Answer 3

上記のように、問題は半画素です。半分にできない光のブロックである作業とピクセルを監視します。一部のブラウザでは、この問題を解決するために巧妙に試してみることができますが、これを行うときにすべてのブラウザで一貫した結果を得ることはできません。

私は960ピクセル幅にお仕事をお勧めしますし、それが有効なCSSでないと、あなたがこの仕事を得ることができる方法はありませんhttp://www.960.gs

のようなものを使用します。