2012-06-22 7 views
8

私は単純なdivタグを持っています。これはHTML文書内に絶対配置されています。 Chromeで「右」CSSルールをピクセル単位で固定値に設定し、「左」ルールを「自動」に設定した後、すぐにjqueryの位置()メソッドを使用して左位置を決定すると、この種類のものです:122.6363525390625です。 offset()メソッドの場合も同じです。なぜjQueryのposition()メソッドとoffset()メソッドがChromeで小数値を返すのですか?

Firefoxこの問題はありません。

これがなぜ起こるのか、それを防止する方法があるのか​​教えてください。 ありがとうございます!

+0

この動作を実証するための小さな例を設定できますか?私はここでそれを再現できませんでした:http://jsfiddle.net/Wjvak/ – Simon

+0

ネイティブメソッドを試してください: 'getComputedStyle(yourElem).getPropertyValue( 'left')'。それが浮動小数点数を返す場合、それはChromeがあなたに与えるものであり、数値を手動で整数に変換する必要があります。 –

答えて

10

これは、幅のパーセンテージを使用すると、数学がどのように機能するかがわかるためです。

<div style="width: 111px"> 
    <div style="width: 50%"></div> 
</div> 

内部要素の幅は、自然数ではなく55.5ピクセルになります。 CSSの正確な属性に応じて、これは小数点以下の桁まで簡単に機能します。

Chrome uses subpixel renderingです。そのため、この現象が発生します。

最後に、なぜこの問題が発生するのか分かりませんが、自然数に丸める場合はMath.round(x)を使用してください。

-2

クロムでは値が切り捨てられているため、120,120.5,120.6はすべて同じ幅を示します。したがって、10進値を使用することを心配する必要はありません。 .5ピクセルのようなものはありません。ピクセルは全体の単位です。 10進数値を返す関数のこの問題がある場合、なぜparseIntを使用しないのですか?世話をするためにこの物をブラウザに残すべきではありません。さもないとあなたのページが壊れるかもしれません。

関連する問題