22

特定の流動的なデザイン、特に % 幅の iFrame を含むデザインでは、Chrome で奇妙な丸めタイプのエラーが発生するようです (バージョン 21 を使用しています)。

この Fiddleは問題を示しています。境界線を整数のピクセル値に設定すると、要求したときに返される値は、期待値よりもわずかに小さい浮動小数点数になります。

CodePenでまったく同じコードを試しても、同じ結果は得られません。おそらく、iFrame とその周りの他のスタイルが同じように設定されていないためです。

(jsFiddle で問題のその部分を再現することはできませんでしたが、基本的な幅と高さの属性についてもこの動作を確認しました。)

これは Firefox や IE8 では問題にならないようです。

具体的には、この奇妙な動作を引き起こしているものと、それを回避して実際の値を取得する方法についてのアイデアはありますか?

プロットが厚くなります。この問題を回避しようとして、10px を超える値は問題の影響を受けないようであることがわかりました。

また、@GionaF のコメントに基づいて、Chrome 22 で適切に動作するようです。

4

5 に答える 5

13

I can't reproduce this behavior in Chrome currently, but this behavior most likely has to do with Subpixel Rendering. Essentially, Webkit will do calculations using integer math to avoid floating point imprecision.

It seems that currently, border does not use subpixel rendering which may explain why the issue is not visible in new Chrome versions.

于 2013-05-19T14:35:13.523 に答える
12

問題を再現するには、Chrome のズーム レベルを変更する必要があります。ズームレベルを 100% に戻すと修正されます。これはバグのようです。ズームインまたはズームアウトすると、計算された境界線の幅が常に定義された境界線の幅よりも小さくなります!

ズームレベルが 110% の場合、10px の境界線は 10 の値を与えますが、125% では 3px の境界線と同じ問題があります。

編集: Firefox は同じ動作をします!

于 2013-05-24T16:29:44.393 に答える
4

すべての要素に対して box-sizing を border-box に設定するとまったく役に立ちますか? これにより、境界線とパディングが幅に影響を与えないボックス モデルの計算方法が変更されます。

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
于 2013-05-24T00:15:35.060 に答える