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

Question

FF 和 Chrome 之间的 element.offsetWidth 存在 1px 差异。

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

还是没有解决办法。我希望用普通 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。