javascript - offsetWidth 在不同的浏览器中不一样

Question

在 element.offsetWidth 中，FF 和 Chrome 之间有 1px 的差异。

我一直在阅读以试图理解这个问题。试图reset the CSS , 试图将元素从屏幕边界附近移开(我记得旧的 IE 在屏幕边界附近 10px 是不准确的)。找到this answer关于 FF 需要 setTimeout，但没有回答为什么...

仍然没有解决办法。我希望使用 vanilla JS 或 CSS 来理解/修复它。

问题:

这是为什么？我可以在我的 CSS 中做些什么来使值保持一致？

jsFiddle:http://jsfiddle.net/f35j2/show/

html

<div id="wrapper" style="width: 203px; height: 203px;">
    <div id="inner" style="width: 50%; height: 50%; margin: auto; display: block;"></div>
</div>

Answer 1

内部元素的宽度是一个非整数。 FF 和 Chrome 对数字进行四舍五入的方式不同。您可以使用 inner.getBoundingClientRect().width(即 101.5)获得准确的宽度

这是因为父元素是203px。不是 202 或 204。