不同缩放级别下父子Div边框重叠/间隙问题（Chrome/Edge 80%缩放）

嘿，这个问题我之前也碰到过！本质上是浏览器亚像素渲染差异导致的——Chrome和Edge用的Blink引擎，在处理非100%缩放时，对小数像素的计算和渲染逻辑和Firefox的Gecko引擎不一样，就会出现这种看似无厘头的间隙或元素溢出。

给你几个亲测有效的解决方案，按优先级排序：

• 触发硬件加速，修正像素渲染：给父容器（.container）添加transform: translateZ(0)或者will-change: transform。这会让浏览器用GPU来处理元素渲染，减少亚像素错位的概率：

  .container {
    transform: translateZ(0);
    /* 或者 will-change: transform; */
  }
  

• 裁剪溢出内容：如果间隙或溢出是因为像素计算的微小偏差，给父容器设置overflow: hidden，直接把超出或间隙部分裁掉，简单粗暴但有效：

  .container {
    overflow: hidden;
  }
  

• 改用现代布局模型：放弃传统的块级布局，换成flexbox或grid。这些现代布局规范在处理元素对齐、百分比宽度时，对像素的计算更严谨，能从根源减少缩放时的布局异常：

  .container {
    display: flex;
    flex-direction: column;
  }
  

• 避免小数像素值：检查你的CSS，尽量不要让元素的宽度/高度产生小数像素（比如百分比嵌套、非整数的rem/em值）。可以用calc()来调整，比如把width: 33.33%改成width: calc(100% / 3)，让浏览器更精准计算。

另外补充下，Firefox之所以没这个问题，是因为它的亚像素渲染算法对这种边界对齐的处理更严格，会自动调整像素偏差，而Blink引擎在某些缩放比例下（比如80%）会保留这些微小的计算误差，最终显示成可见的间隙或溢出。

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