Chrome 108更新后span元素基线偏移及旧行为恢复问询

Chrome 108对inline元素的基线计算逻辑做了调整，导致多层嵌套span的垂直布局行为从向上扩展变为向下偏移，以下是几种可恢复旧布局的方案：

1. 强制指定垂直对齐方式 #

给嵌套的span元素显式设置vertical-align属性，覆盖浏览器的默认计算逻辑。如果旧布局是元素向上扩展，优先尝试top或text-top值：

/* 针对所有嵌套span设置 */
.outer span {
  vertical-align: top;
}

也可以根据实际布局需求，选择baseline或middle来匹配旧版本的显示效果。

2. 改用inline-block布局 #

将嵌套span设置为inline-block，脱离默认的inline流，手动控制垂直位置，这种方式能避免浏览器版本间的基线计算差异：

.inner {
  display: inline-block;
  vertical-align: top; /* 匹配旧版本向上扩展的行为 */
}

3. 统一line-height值 #

如果基线偏移是由line-height的计算逻辑变化导致的，给父容器或所有span设置固定的line-height：

.container {
  line-height: 1.2; /* 根据你的布局调整合适的数值 */
}

确保所有嵌套元素继承该属性，减少版本间的布局差异。

测试验证 #

可以用以下代码快速验证方案效果：

<div class="container">
  <span class="outer">外部文本
    <span class="inner">嵌套的内层文本</span>
  </span>
</div>

搭配上述CSS规则，对比Chrome 107和108的显示效果，找到最贴合旧布局的配置。

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