offsetWidth在不同的浏览器中不相同

我在element.offsetWidth中FF和Chrome之间的差异为1px。offsetWidth在不同的浏览器中不相同

我一直在阅读试图了解这个问题。试图reset the CSS，试图将元素从屏幕边界附近移开（我记得如果在屏幕浏览器附近有10px的话，旧IE浏览器是不准确的）。发现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>

来源

2014-06-08 Rikard

内部元件的宽度是一个非整数。 FF和Chrome对数字进行了四舍五入。你可以通过使用inner.getBoundingClientRect（）。width（这是101.5）得到确切的宽度。

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

来源

2014-06-08 10:04:12

有趣的......'+ 1'。除了让每个浏览器的if/else脚本能够弥补这个问题之外，还有什么可以改正吗？ – Rikard

不清楚if/else脚本是什么意思。正如我的回答中所提到的，如果需要，您仍然可以获得确切的宽度。如果您想要将所有浏览器中的宽度更改为相等，则不需要if/else脚本。否则，您可以将父容器更改为具有均匀宽度（如果可能）。 –

伊曼，父元素有奇数的宽度，我不能改变这一点。通过if/else脚本，我的意思是功能检测浏览器，并补偿每个浏览器所做的向上/向下循环，因此我在每个浏览器中获得一致的编号，这是我的目标。 – Rikard

当我打开在Chrome和Firefox你的jsfiddle链接，并分析了一下我的价值观是：

在这两种浏览器（Firefox和Chrome）的高度和宽度的CSS计算值（对于#inner）是相同的，即101.5px
在绘制元素时，FF使用小数值向下舍入。因此，绘制的高度和宽度是101px。
但Chrome正在使用向上/向下舍入到最接近的整数高度。即在100.5至101.4999之间的任何值将被视为101，并且101.5至102.4999将为102
但是对于宽度，计算仅向下舍入。即从101到101.9999的任何值将被视为101

请参考下面的快照 snapshot 。您可以对边界值（例如101.4999,101.9999）进行相同的练习，以获得更多关于此的信息。

来源

2014-06-08 10:41:14 Nitesh

有趣的'+ 1'。在FF中，你在哪里/如何获得浮动值？ – Rikard

@Rikard，你也可以使用开发者工具（F12）>> Inspector在FF中看到它。查看_Computed_和_Box Model_选项卡下的值的差异。 – Nitesh

offsetWidth在不同的浏览器中不相同

回答

相关问题