父容器背景偶现，子容器无法100%覆盖（随缩放比例/浏览器变化）

这个问题我之前做网格类交互时也踩过一模一样的坑！本质是Chrome和Edge用的Blink渲染引擎在处理亚像素尺寸时的舍入误差——当页面缩放后，原本的整数尺寸会被转换成非整数的物理像素，子元素100%的尺寸计算就可能出现细微偏差，导致父元素的蓝色背景偶尔“钻”出来。Firefox的Gecko引擎在这部分的渲染逻辑更严谨，所以没出现这类问题。

下面给你几个能保留父容器边框需求的靠谱解决方案，按推荐程度排序：

方案一：绝对定位实现完全覆盖（最稳妥） #

利用绝对定位的特性，让.inner-box直接贴合父容器的四个边缘，彻底规避尺寸计算的误差问题：

修改后的CSS代码：

#outer-container {
  width: 600px;
  display: flex;
  flex-flow: row wrap;
}
.outer-box {
  width: 150px;
  height: 150px;
  background-color: blue;
  border: 1px solid black;
  box-sizing: border-box;
  position: relative; /* 新增：让子元素的绝对定位基于自身 */
}
.inner-box {
  position: absolute; /* 新增 */
  top: 0; right: 0; bottom: 0; left: 0; /* 新增：贴合父容器四边 */
  background-color: green;
  /* 移除原来的width:100%和height:100% */
}

这个方法的优势是不管父容器的尺寸、边框怎么调整，子元素都会精准覆盖整个父容器内部，完全不会出现缝隙，而且兼容性拉满，所有现代浏览器都支持。

方案二：微小尺寸溢出抵消亚像素误差（轻量hack） #

如果不想改动定位逻辑，可以给.inner-box设置稍微超出父容器的尺寸，抵消渲染时的舍入偏差：

.inner-box {
  width: calc(100% + 2px); /* 新增：宽度增加2px */
  height: calc(100% + 2px); /* 新增：高度增加2px */
  margin: -1px; /* 新增：向外扩展1px */
  background-color: green;
}

这里的-1px外边距配合+2px的尺寸，会让.inner-box刚好覆盖父容器的边框区域（同时填补亚像素缝隙）。即使父容器没设置overflow: hidden，1px的偏差视觉上也几乎不可察觉。

方案三：CSS缩放放大子元素（应急方案） #

用transform: scale()给.inner-box做极微小的放大，让它覆盖可能出现的缝隙：

.inner-box {
  width: 100%;
  height: 100%;
  background-color: green;
  transform: scale(1.002); /* 轻微放大 */
  transform-origin: top left; /* 确保从左上角开始放大，避免偏移 */
}

这个方法操作最简单，但属于hack手段，某些极端缩放比例下可能依然有问题，只推荐作为应急备选。

补充一句：你之前试的flex/grid/box-sizing没用，是因为这些都属于流式布局的尺寸计算，依然绕不开浏览器的亚像素舍入问题；而绝对定位是脱离文档流的，直接基于父容器的物理边缘定位，从根源上解决了尺寸偏差的问题。

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