不同字号与DOCTYPE引发Grid布局间隙的原因及解决方法

问题复现代码 #

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 8rem; background-color: white">D</span></span>
</div>

<div style="display: inline-grid">
  <span style="background-color: red"><span style="font-size: 0.1rem; background-color: white">A</span></span>
  <span style="background-color: green"><span style="font-size: 0.2rem; background-color: white">B</span></span>
  <span style="background-color: blue"><span style="font-size: 0.4rem; background-color: white">C</span></span>
  <span style="background-color: yellow"><span style="font-size: 0.8rem; background-color: white">D</span></span>
</div>

问题成因 #

1. 标准模式的网格约束：当页面带有<!doctype html>时，浏览器处于标准模式，CSS网格规范规定网格项默认min-height为auto。这个值会参考字体的默认行高（多数浏览器默认行高约1.2），哪怕字号缩到极小，行高会给网格项设置一个最小高度下限，导致无法完全跟随文本尺寸收缩。
2. 怪异模式的渲染回退：移除DOCTYPE后，浏览器进入怪异模式，网格布局的渲染规则回退到旧版行为，不再强制应用基于行高的最小高度限制，网格项能自适应内部文本的实际大小，因此左右网格的间隙比例恢复一致。

解决方案 #

要让网格无论字号大小都能正常收缩，只需要打破网格项的默认最小高度限制：

• 给所有网格项添加min-height: 0样式，覆盖默认的min-height: auto：

  <div style="display: inline-grid">
    <span style="background-color: red; min-height: 0"><span style="font-size: 0.1rem; background-color: white">A</span></span>
    <span style="background-color: green; min-height: 0"><span style="font-size: 0.2rem; background-color: white">B</span></span>
    <span style="background-color: blue; min-height: 0"><span style="font-size: 0.4rem; background-color: white">C</span></span>
    <span style="background-color: yellow; min-height: 0"><span style="font-size: 0.8rem; background-color: white">D</span></span>
  </div>
  

• 额外优化：如果需要更极致的收缩效果，可以给内部文本span设置line-height: 1，消除行高带来的额外高度：

  <span style="font-size: 0.1rem; background-color: white; line-height: 1">A</span>
  

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