Firefox中不同字号元素text-decoration下划线不一致问题求助

这个问题我之前也踩过坑！核心原因是Firefox对text-decoration: underline的渲染逻辑有点特殊：下划线的粗细是跟着应用该样式的元素字体大小走，而不是被包裹的子元素字号。

看你的代码就能明白：

• 第一行的下划线加在默认字号的外层<span>上，哪怕里面的"Bigger"用了50pt大字号，下划线粗细还是基于外层的小字号计算，所以看起来偏细；
• 第二行的下划线直接加在50pt的<span>上，下划线自然跟着大字号变粗，两者就出现了差异。

给你两个实用的解决办法：

方法1：用text-decoration-thickness强制统一粗细 #

这个CSS属性可以直接指定下划线的厚度，Firefox完全支持，现在兼容性也很不错。你可以给所有需要下划线的元素统一配置：

.unified-underline {
  text-decoration: underline;
  /* 可以设具体像素值，也能用from-font继承字体自带的下划线厚度 */
  text-decoration-thickness: 2px;
  /* 可选：调整下划线和文本的间距，让视觉效果更舒服 */
  text-underline-offset: 3px;
}

然后把你的HTML改成用这个类：

<span class="unified-underline"> SomeText <span style="font-size: 50pt">Bigger</span> SomeText </span>
<br/>
<span style="font-size: 50pt;"> <span class="unified-underline">Bigger</span> </span>

方法2：用border-bottom模拟下划线 #

如果担心极旧版本浏览器的兼容性，用边框模拟下划线是更稳妥的方案，完全可控：

.border-underline {
  border-bottom: 2px solid currentColor;
  /* 调整边框和文本的距离，可根据字号灵活修改 */
  padding-bottom: 2px;
  /* 行内元素需要加这个才能让padding生效 */
  display: inline-block;
}

替换成这个类后，不管父元素或子元素的字号多大，边框厚度都是你指定的数值，完全不会出现粗细不一致的问题。

两种方法都能解决你遇到的Firefox专属问题，选哪个看你的兼容性需求就好～

内容的提问来源于stack exchange，提问作者Kacper G.