不知何故,我在 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 个像素,但计算中没有问题,因为显示的宽度是相同的。现在我可能只需要忍受它
最佳答案
实际宽度可能是 89 到 90 之间的非整数像素数。计算 offsetWidth 时,实际宽度四舍五入到最接近的整数。绘画时,您所看到的将取决于所使用的确切抗锯齿算法等等。
如果您只想要对象的实际值,请使用 getBoundingClientRect().width,它不会做愚蠢的“舍入到整数”的事情。
关于firefox - ff 中的 offsetWidth 与实际元素宽度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11685685/