浏览器半像素与JavaScript clientWidth/clientHeight的关联及布局疑问

这不是布局引擎的bug，而是浏览器处理亚像素布局的常规机制哦，咱们来拆解一下你遇到的几个疑问：

为什么外部子元素的clientHeight是100px和101px？ #

首先，201px的容器均分两个子元素，数学上每个子元素的高度是100.5px——浏览器的布局引擎是支持亚像素精度计算的（所以Chrome开发者工具能显示出精确的100.5px），但当你通过clientHeight这类DOM API获取元素高度时，浏览器会把亚像素值取整为整数像素。Chrome这里采用的是就近舍入规则，所以两个子元素一个被舍为100px，一个入为101px，刚好凑够201px的总高度。

为什么内部100%高度的元素都是101px？ #

这是浏览器为了避免视觉缝隙的优化：内部元素的height: 100%是基于父元素的**计算高度（100.5px）**来渲染的。如果内部元素取100px，会导致父元素底部留下0.5px的空白，在屏幕上可能会显示为一条细微的线或者模糊区域。为了避免这种视觉问题，浏览器会把内部元素的高度向上取整到101px，确保完全填充父元素的亚像素高度。

简便的修复方法 #

这里给你几个实用的解决方案：

• 避免亚像素场景：把容器高度设为偶数（比如200px），这样两个子元素刚好各占100px，从根源上消除亚像素问题。
• 强制子元素继承完整高度：在flex/grid子元素上添加height: 100%，配合box-sizing: border-box（如果有padding/border的话），让子元素的计算高度严格匹配容器的均分高度，减少取整差异。
• 明确指定亚像素高度：用CSS的calc()给子元素设置height: calc(201px / 2)，虽然clientHeight还是会取整，但渲染时的视觉高度会保持一致，不会出现内部元素高度不一致的情况。
• JS手动校准：如果需要精确的高度值，可以通过JS计算出精确的100.5px，然后设置element.style.height = '100.5px'，不过不同浏览器对亚像素的渲染表现可能略有差异。

内容的提问来源于stack exchange，提问作者medihack