ff中的offsetWidth与实际元素宽度不同

Question

不知何故，我在Firefox和Chrome中获得了不同的offsetWidth结果。 我有一个简单的按钮

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

其offsetWidth恰好为89像素。 Chrome说是这样，Photoshop也是如此。即使在Firefox中它也被显示为89像素元素，但Firebugs offsetWidth表示它有90像素。 jQuery在Firefox中为outerWidth()获得了90个像素。 当我使用宽度来计算时，它需要完全正确。

• 遗憾的是我不允许发布图片

Picture1

图片2

为什么firefox中offsetWidth属性错误？

来自评论的编辑：

我正在使用自定义字体。禁用字体可以解决问题。但是，在FF + Linux上使用自定义字体进行测试，在Windows 7上使用FF + Win7和Chrome + Win7 - Firefox是唯一一个显示宽度与计算出的offsetWidth不同的浏览器。尽管 - 由于字体渲染 - 按钮在Linux上有91个像素，但计算中没有问题，因为显示的宽度是相同的。现在我可能只需要忍受那个

Answer 1

实际宽度是89到90之间的非整数像素数。在计算offsetWidth时，实际宽度舍入到最接近的整数。在绘画时，你看到的将取决于所使用的确切抗锯齿算法和诸如此类的东西。

如果你只是想要对象的实际使用是使用getBoundingClientRect（）。width，这不会做愚蠢的“舍入到整数”的事情。