浏览器缩放后div元素间出现异常空白的原因及解决方法咨询

当浏览器缩放页面（非100%）时，元素的实际渲染尺寸会基于缩放比例计算，很多时候会得到非整数像素值。浏览器的渲染引擎无法直接绘制半像素，会通过取整、颜色插值等方式处理这些小数像素，这就导致原本应该紧密贴合的div之间出现微小的空白间隙。这种问题本质是浮点精度计算误差和浏览器像素渲染机制共同作用的结果——100%缩放时元素尺寸都是整数像素，渲染没有歧义，一旦缩放，小数像素的处理就会引发间隙。

• 改用flexbox布局：flex的对齐机制会自动处理元素间的微小偏差，大幅减少这类间隙问题，是最推荐的方案。
• 给父元素设置font-size: 0：如果是inline-block类型的div，换行产生的空白在缩放时会被放大，父元素设为0字号可消除这类空白，子元素再单独设置字号即可。
• 开启硬件加速：给div添加transform: translateZ(0)，让GPU负责渲染，其浮点计算精度更高，能缓解像素取整带来的间隙。
• 使用负边距抵消：给div设置margin: -1px，用微小的负边距覆盖可能出现的间隙，注意不要影响整体布局。
• 固定元素尺寸：尽量使用整数像素值定义div的宽高，避免百分比、em/rem等可能产生小数像素的单位。

内容的提问来源于stack exchange，提问作者B vijay kumar reddy