如何解决Chrome浏览器中嵌套div之间出现异常空白的问题

问题原因 #

该问题是Chrome浏览器在非100%系统缩放比例下的子像素渲染精度差异导致的：你的笔记本设备大概率开启了非100%的系统显示缩放，小尺寸元素的百分比属性计算会出现小数像素，Chrome的软渲染逻辑会在父子元素间留下空白缝隙，Firefox的子像素处理逻辑不同所以显示正常。

解决方案 #

可按优先级尝试以下方案，前两个方案组合使用基本可以覆盖所有场景：

• 给父容器.bar添加overflow: hidden属性，直接截断多余空隙，同时也能避免子元素超出父容器的圆角范围，改造成本最低：

.bar {
 width: 200px;
  height: 6px;
  border: 1px solid black;
  border-radius: 3px;
  overflow: hidden; /* 新增该行 */
}

• 统一盒模型避免尺寸计算偏差，给两个元素添加box-sizing: border-box属性，确保边框不会额外占用容器尺寸导致计算误差：

.bar, .progress {
  box-sizing: border-box;
}

• 替换百分比高度为固定值，避免百分比计算的子像素误差：将.progress的height: 100%替换为和父容器内容高度一致的固定值height: 6px。
• 如果以上方案都不生效，给父容器添加transform: translateZ(0)开启GPU渲染，绕过软渲染的像素对齐问题。

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