2012-03-21 5 views
4

私の要素のサイジングにパーセンテージ(%)を使用すると、クロムは明らかに数学的に独自のルールを作ることを好みます。クロムとそれが%sを扱っている

80 + 20を追加すると100になります。右?よかったよ。 Chromeもこれを理解しています。しかし、同じ式を別に書くとどうなるでしょう。例えば:(78 + 1 + 1)+(18 + 1 + 1)あなたは何を得ましたか?それは100でしたか?うん、私も。

だから誰かしてくださいなぜChromeは別の考えを持っているのですか?

2つの要素を取り、それらを互いに並べて浮動させます。次に、1つの要素にwidth:20%を適用し、残りの要素にはwidth:80%を適用します。ページ(またはコンテナ)の100%が、両方の要素が並んで占有されていることがわかります。ただし、単純にして、各要素の両側にわずか1%のパディングを追加しましょう。つまり、1つの要素にはwidth:18%; padding:1%があり、もう1つの要素にはwidth:78%; padding:1%が含まれます。理論的には、これは依然として同じ結果を持つはずです。つまり、ページ(またはコンテナ)の100%が両方の要素が並んで占有されています。しかし、Chromeでは、これは単純ではありません。それは不足している。

プーディーの証明はjsfiddleです(Chromeを使用している場合は若干の違いがあります)。

すべてが合わさったとき、特に、より多くの量の要素が並んで使用されていると、本当にレイアウトが駄目になる可能性があるので、イライラします。パディングやマージンを処理するための子要素を作成することで、状況を回避できますが、そうしなければ余計なマークアップを使用する可能性があります。

なぜChromeがこのように振る舞うかについての説明が必要です(多分Webkitのことですが、まだテストしていません)。

+1

丸め誤差のようです。ゆっくりとサイズを変えれば、ちょっと動き回ることに気付くでしょう。私はクロムが別々に1%を丸めていると思われます。したがって、合計幅が240pxの場合、4pxのパディングがそれぞれ2pxになり、最後に4pxのギャップが残ります。 –

+2

うん、まさに丸めの「エラー」。 WebKitは、分数ピクセルのようなものがないことを理解しているように見えますが、分数ピクセルで終わるようにする何かを行うと、最も近いピクセル全体が切り捨てられます。これは、分数コンポーネントを生成せずに使用されているすべてのパーセンテージにわたって均等に分割された固定コンテナ幅を選択することで簡単に実証されます。例:http://jsfiddle.net/XcA4F/2/ – aroth

+1

Webkitは2012年5月から[サブピクセルレンダリング](http://trac.webkit.org/changeset/116009)で動作します。 –

答えて

6

これはbugです。

+1

間違いなく丸め誤差:http://www.screenr.com/pvB8 – benesch

+0

TY for screencap:]有益です。 –

0

クロムのWebkitマージンを変更して問題を修正しました。私は使用した:

-webkit-margin-start:-5%;

0

フローティング要素の周りにオーバーフローを隠して(まれに)ラッパーを配置します。次に、適切に四捨五入されていないdivで、calc(X%+ 1px)を使用して問題を修正します。

関連する問題