Chrome等效分辨率下CSS小数宽高渲染值不一致问题

Chrome 渲染管线会结合设备物理像素做亚像素级对齐，确实会导致等效逻辑分辨率下，元素渲染尺寸的小数位出现微小偏差，这个差异是浏览器引擎实现逻辑区别导致的，不属于渲染异常。

原因说明 #

• CSS层的「逻辑分辨率等效」不会覆盖Chrome完整渲染流程。Blink内核的渲染计算不会全程保留浮点数精度的CSS像素值，会在布局到光栅化的中间环节做多次像素转换：
  1. 布局树生成阶段计算得到CSS像素尺寸后，会先按当前设备的devicePixelRatio（DPR，1080P 100%缩放时DPR为1，4K 200%缩放时DPR为2）换算为物理像素值
  2. 换算后Chrome会针对物理像素网格做亚像素取整对齐，避免出现半物理像素渲染导致的边框、文字发虚问题，不同DPR下的取整阈值、对齐规则完全独立
  3. 最终开发者通过DevTools或DOM API读取到的渲染尺寸，是对齐后的物理像素值反向除以DPR换算回CSS像素的结果，自然会出现小数位的微小偏差
• 该现象仅在Chrome出现的原因是Firefox采用了不同的对齐逻辑：Firefox会在布局计算阶段直接基于CSS逻辑像素完成亚像素对齐，物理像素转换阶段不会做二次数值调整，因此只要逻辑分辨率一致，最终输出的CSS像素尺寸就不会出现差异。

处理建议 #

0.01像素级的偏差属于浏览器实现层面的正常差异，不会产生可感知的视觉影响，无需额外兼容。如果业务逻辑强依赖高精度像素值判断，建议对读取到的渲染值做固定小数位的四舍五入后再使用，不要直接依赖原始计算值。

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