Chrome中外层与内层Div间出现像素级间隙，是否为渲染Bug？

这确实是Chrome的亚像素渲染Bug，常见于元素高度为非整数像素值，结合奇数宽度边框时的渲染对齐问题。

问题原因 #

你的.meters使用grid-auto-rows: 1.3rem，这个值转换为实际像素时大概率是小数（比如1.3rem在16px基准下是20.8px）。当.meter的高度为非整数像素，同时设置了奇数宽度的边框（3px），Chrome在计算内层.fill的拉伸高度时，会出现亚像素截断误差，导致边框和填充元素之间出现肉眼可见的白色间隙。

不同border宽度的表现差异也印证了这一点：

• 1px或4px边框：亚像素计算后的对齐误差被抵消，间隙消失
• 2px边框：仅底部出现间隙，是垂直方向亚像素分布的不对称性导致
• 页面缩放至110%：像素比例重新计算，亚像素误差被覆盖，间隙消失

可行解决方案 #

以下几种方法可以解决这个问题：

• 使用整数像素高度：将grid-auto-rows改为整数像素值，比如21px（替代1.3rem），从根源避免亚像素计算
• 给.fill强制设置高度：给.fill添加height: 100%; min-height: 100%;，强制填充元素的高度与容器完全对齐
• 用box-shadow模拟边框：将.meter的border替换为box-shadow: 0 0 0 3px black;，box-shadow的渲染逻辑不会触发这类亚像素间隙
• 触发GPU加速修正对齐：给.meter添加transform: translateZ(0);，通过GPU渲染修正亚像素对齐误差

代码示例（修改高度为整数像素） #

.meters {
  display: grid;
  grid-template-columns: 4rem 1fr 3rem;
  grid-auto-rows: 21px; /* 替换1.3rem为整数像素 */
  align-items: center;
  gap: 0.8rem;
}
.meter {
  display: flex;
  height: 100%;
  border: solid 3px black;
}
.fill {
  background: blue;
  height: 100%; /* 强制填充高度 */
}

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