跨浏览器非全屏窗口下父子DIV渲染白边问题求助

我之前也碰到过类似的跨浏览器渲染异常，这个问题的核心原因是浏览器的亚像素渲染精度误差，具体来说：

当浏览器窗口处于非最大化/非全屏状态时，页面的实际渲染缩放比例可能不是整数倍（比如系统缩放设置、窗口手动调整后的像素对齐逻辑）。你的父容器设置了固定的width: 600px，但在非整数缩放的场景下，这个宽度会被浏览器转换为非整数的物理像素值（例如599.7px或600.3px）。

而子容器的width: 100%会继承这个非整数宽度，但浏览器对于块级元素的宽度渲染会做像素舍入处理，同时父容器的overflow: hidden在亚像素场景下无法完全截断这种细微的像素偏差，再加上父容器没有设置背景色（默认白色），就会露出你看到的白色间隙。全屏/最大化状态下，页面缩放比例通常是整数倍，亚像素偏差被消除，所以间隙就消失了。

你的代码回顾 #

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 600px;
  height: 400px;
  border: 1px solid black;
  margin: auto;
  padding: 0;
  overflow: hidden;
  .child{
    width: 100%;
    height: 50px;
    background: #000;
  }
}

快速解决方案 #

• 方案1：统一背景色
  给父容器设置和子容器相同的background: #000，这样即使存在像素偏差，视觉上也不会露出白色间隙。
• 方案2：微调整子容器宽度
  把子容器的宽度改为width: calc(100% + 1px)，用微小的宽度增量覆盖可能的像素偏差，同时父容器的overflow: hidden会截断超出的部分，不会影响布局。
• 方案3：触发硬件加速
  给父容器或子容器添加transform: translateZ(0)或will-change: transform，触发浏览器硬件加速，提升亚像素渲染的精度。

内容的提问来源于stack exchange，提问作者Designs By Cornelius