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

Question

当我有一个高度不均匀（例如 201 px）的容器元素（使用网格或 Flex 布局）并将其他两个元素放入该等分元素内时，Chrome 开发人员工具会显示这些元素的每个高度恰好是大小的一半（ 100.5 像素）。但是当我使用 JavaScript 获取clientWidth这些元素时，它们分别四舍五入为 100px。101 像素。

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

附加说明我更想知道为什么当外部元素报告 100 时，内部元素确实报告 101px。101 像素。

Answer 1

根据W3C 规范，clientHeight（和相关属性）应该是类型long（整数），因此 JS 引擎返回一个四舍五入的整数值。不过，布局信息仍然可用，如果您想要精确的像素，则应该使用该getBoundingClientRect()方法。如果您需要小数值，MDN还建议使用此值。

我已经更新了你的小提琴，现在显示半像素：

Outer rects:
200.5
200.5
Inner rects:
200.5
200.5