Chrome渲染flex布局元素边框出现间隙的原因及解决方案

• Chrome浏览器中，flex布局下相邻带边框元素的接缝处会出现透出页面红色背景的细红线，同页面在Firefox浏览器中无该异常渲染
• 渲染效果对比：Chrome vs Firefox 渲染截图
• 复现环境说明：同版本（103.0.5060.114）Chrome，无扩展、页面缩放100%条件下，Ubuntu 22.04、Windows 11可稳定复现，Fedora 36无该异常。

CSS样式 #

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  background: red;
  color: #ccc;
  font-family: Roboto, Garuda;
  border: 12px solid seagreen;
}

header {
  display: flex;
  flex-direction: row;
  border: 8px solid mediumpurple;
}

header #logo {
  flex-grow: 0;
  flex-basis: auto;
  border: 8px solid gold;
}

header nav {
  flex-grow: 1;
  flex-basis: auto;
  border: 8px solid mediumspringgreen;
}

main {
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
  border: 8px solid greenyellow;
}

main article {
  flex-grow: 1;
  flex-basis: auto;
  border: 8px solid salmon;
}

main aside {
  border: 8px solid violet;
}

footer {
  border: 8px solid hotpink;
}

HTML结构 #

<header>
  <div id="logo">Header</div>
  <nav>Navigation</nav>
</header>
<main>
  <article>
    <h1>Header 1</h1>
    <p>Paragraph text <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
  </article>
  <aside>Sidebar</aside>
</main>
<footer>Footer
</footer>

提问中提到的全局重置规则：

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}

仅能统一盒模型计算逻辑、清除浏览器默认元素外边距，无法解决该类渲染间隙问题，因为该问题不是CSS布局逻辑错误导致的。

该现象是Chromium内核在部分平台下的亚像素渲染舍入误差导致：
flex布局分配容器剩余空间时，计算出的子元素尺寸可能为非整数值，Chromium的渲染后端Skia在不同系统、不同渲染路径下对非整数尺寸的舍入策略存在差异：

• Windows、Ubuntu 22.04下默认走的软件光栅化渲染路径会对单个子元素尺寸单独四舍五入取整，多个子元素取整后的尺寸总和可能小于容器总尺寸，差值部分就会露出底层父容器的红色背景，也就是看到的红线
• Fedora 36下默认开启了GPU合成渲染路径，舍入逻辑会保证邻接元素尺寸凑整后总和填满容器，不会留缝隙，因此无法复现问题
• Firefox浏览器从排版层就做了邻接元素的像素对齐处理，不会出现这类累计舍入误差。

• 方案1：给flex容器触发GPU合成层，强制走亚像素抗锯齿渲染路径，给flex容器添加样式transform: translateZ(0);即可，该方案无明显布局副作用
• 方案2：给邻接的flex子项添加极小的负边距抵消缝隙，比如header > *, main > * { margin: 0 -0.3px; }，该值远小于1像素，不会破坏原有布局，刚好填充亚像素级间隙
• 方案3：如果不需要边框参与布局计算，可以把border替换为outline，outline是绘制在元素边缘外的装饰层，不会参与flex尺寸计算，也不会出现舍入留缝问题
• 方案4：给flex父容器设置和相邻边框同色系的背景，就算出现亚像素缝隙，露出的颜色和边框接近，视觉上无法感知。

• 检查不同系统下Chrome的chrome://flags配置差异，重点核对Skia Graphite、LCD text antialiasing、Subpixel rendering、GPU rasterization几个选项的启用状态，软件光栅化路径更容易触发亚像素舍入问题
• 检查系统级显示缩放配置：哪怕Chrome内页面缩放设置为100%，如果系统全局开了125%、150%这类非整数倍缩放，会额外引入一层像素换算，大幅提高亚像素误差出现的概率
• 检查显卡驱动差异：开源驱动、闭源专有驱动对Chrome GPU合成层的支持逻辑不同，会直接影响渲染时的像素舍入策略。

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