javascript - CSS流体グリッドのサブピクセル丸めの問題を修正

Question

流動的なCSSグリッドを作成しようとしていますが、FirefoxとIE8 +では機能しますが、サブピクセルの丸めの問題が発生するSafari / Chrome/Operaでは機能しません。

.column {
  float: left;
  width: 25%;
}

メインコンテナの幅は100％で、Safari / Chrome / Operaでブラウザのサイズを変更すると、丸められた幅に一貫性がないことがわかります。

問題について詳しく読んだ後、サブピクセルの丸めには「正しい解決策も間違った解決策もない」ことを理解しましたが、Firefoxの方法が私にとって最良の妥協点のようです。（たとえば、25％の幅で4 divを設定した場合、カバーされる領域は100％になると予想されます。）

私が見逃したCSSのみの解決策があるかどうか、あるいは問題を解決するためのJavaScriptがあるかどうかを知りたいです。

ありがとう！

更新：2014年5月の時点で、Chrome33とSafari7は「Firefoxの方法」を採用しているようです。

score 8 · Accepted Answer

StubbornellaのOOCSSフレームワーク（以下のリンク）グリッドモジュールは、最後の列に次のオーバーライドを与えることでこれを処理します。

float:    none;
overflow: hidden;
width:    auto;

これにより、コンテナ内に残っている幅をすべて占有できます。

score 0 · Accepted Answer

ブラウザごとにピクセルを上下に丸めるこのための良いオプションはありませんが、その代わりに、私は通常次のことを行います。

.nested:last-child {
    float: right;
}
.nested:first-child {
    float: left;
}

これにより、最後の子が右にフロートするため、pxのずれは明らかではありませんが、それが唯一の要素である場合（たとえば、幅が33％のdiv）、左にフロートし続けます。

2 に答える 2