2

どういうわけか、FirefoxとChromeのoffsetWidthで異なる結果が得られます。シンプルなボタンを手に入れました

<button class="someClass">Dropdown<i class="iconRight iconArrowDown"></i></button>

これはoffsetWidthが正確に89ピクセルです。Chromeはそう言っており、Photoshopもそう言っています。Firefoxでも89ピクセルの要素として表示されますが、FirebugsにoffsetWidthよると90ピクセルであるとのことです。jQueryは、Firefoxforで90ピクセルも取得しouterWidth()ます。幅を使用して計算するので、正確に正しくする必要があります。

  • 残念ながら、まだ画像を投稿することは許可されていません

Picture1http://i.stack.imgur.com/2YMNt.png

Picture2
http://i.stack.imgur.com/HiH9o.png

offsetWidthFirefoxのプロパティが間違っているのはなぜですか？

コメントから編集：

カスタムフォントを使用しています。フォントを無効にすると、問題が解決します。ただし、FF + Linux、FF + Win7、およびChrome + Win7でカスタムフォントを使用してこれをテストします。Windows7のFirefoxは、表示される幅が計算されたoffsetWidthと異なる唯一のブラウザーです。Linuxではボタンのフォントレンダリングにより91ピクセルですが、表示される幅は同じであるため、計算に問題はありません。今のところ、私はおそらくそれと一緒に暮らす必要があります

4

1 に答える 1

4

実際の幅は、89〜90の整数以外のピクセル数である可能性があります。offsetWidthを計算する場合、実際の幅は最も近い整数に丸められます。ペイントするときに表示される内容は、使用されている正確なアンチエイリアスアルゴリズムなどによって異なります。

オブジェクトの実際が必要な場合は、getBoundingClientRect（）。widthを使用します。これは、ばかげた「整数への丸め」を行いません。

于 2012-07-27T17:50:36.997 に答える