firefox - 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 像素.
因为我使用宽度来计算它需要完全正确。

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

图片1

图2


为什么是 offsetWidth Firefox中的属性错误？

从评论编辑:

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

Answer 1

实际宽度可能是 89 到 90 之间的非整数像素数。计算 offsetWidth 时，实际宽度四舍五入到最接近的整数。绘画时，您所看到的将取决于所使用的确切抗锯齿算法等等。

如果您只想要对象的实际值，请使用 getBoundingClientRect().width，它不会做愚蠢的“舍入到整数”的事情。