浏览器中的半像素如何与JavaScript clientWidth / clientHeight相关联？

Question

当我有一个高度不均匀的容器元素（使用网格或flex布局）（例如201 px）并将另外两个元素放在同等分割的元素中时，Chrome开发人员工具向我显示这些元素的每个高度正好是一半尺寸（100.5像素）。但是当我使用JavaScript获得这些元素的clientWidth时，它们会被舍入为100px。 101px。

当我现在再次将一些其他元素放入这些元素中时（宽度和高度设置为100％），这些元素同时显示101px。这是布局引擎中的错误吗？ （见JSFiddle example的控制台）。有没有一种简单的方法来解决这个问题？

附加说明我更想知道为什么内部元素在外部元素报告100 resp时报告101px。 101 px。

Answer 1

根据W3C spec，clientHeight（及相关属性）应为long（整数），因此JS引擎返回舍入的整数值。布局信息仍然可用，如果您想要精确像素，则应使用getBoundingClientRect()方法。如果您需要小数值，The MDN也建议使用此项。

我已更新了您现在显示半像素的fiddle：

Outer rects:
200.5
200.5
Inner rects:
200.5
200.5