Firefox 70以下版本完全不支持text-underline-offset，包括-moz前缀属性；兼容方案需用background-image模拟下划线，并将降级样式置于@supports外层作为基础fallback。
Firefox 70 以下版本根本不认 text-underline-offset
它不是“偶尔失效”，而是从语法层面被忽略——Firefox 直到 70 版本才正式支持该属性。如果你在 Firefox 68 或更早版本里写了 text-underline-offset: 2px，浏览器压根不会解析这行 CSS，computed styles 里也看不到它。别查拼写或优先级，先看版本。
用 -moz-text-underline-offset 也不保险
这个前缀属性只在 Firefox 74+ 之后才稳定支持，且行为和标准版不完全一致：
- Firefox 70–73：前缀属性存在但常被静默丢弃，尤其当父元素有
display: inline-block或vertical-align时 - Firefox ≤69：前缀属性根本不存在，连
@supports (-moz-text-underline-offset: 1px)都会返回 false - 即使生效，
-moz-text-underline-offset对负值、auto和 em 单位的支持更弱，容易回退到默认偏移
真要兼容老 Firefox，得降级为 background-image 模拟
比 border-bottom 更可靠：它不干扰行高、不继承错乱、能对齐 baseline（只要设置得当）。
关键点：
- 用
linear-gradient画单像素线：background-image: linear-gradient(to bottom, currentColor 0%, currentColor 1px, transparent 1px) - 位置靠
background-position: bottom 0.2em控制（0.2em是常见留白起点，可调） - 必须设
background-repeat: repeat-x和background-size: 100% 1px - 记得先清掉原生下划线：
text-decoration: none
示例：
a {
text-decoration: none;
background-image: linear-gradient(to bottom, currentColor 0%, currentColor 1px, transparent 1px);
background-position: bottom 0.2em;
background-repeat: repeat-x;
background-size: 100% 1px;
}
最易被忽略的兼容性陷阱
很多人以为加了 @supports 就万事大吉，但老 Firefox 连 @supports (text-underline-offset: 1px) 都不识别——它直接跳过整个规则块，连降级样式都不会执行。真正安全的做法是：
- 把降级样式写在
@supports外层，作为基础 fallback - 再用
@supports (text-underline-offset: 1px)包裹增强样式，覆盖前面的模拟方案 - 避免依赖字体自带的
underlinePosition元数据，老浏览器根本读不到
字体差异本身就会让同一 offset 在不同环境下视觉距离浮动 1–2px，老 Firefox 的 baseline 渲染逻辑又和新版不一致——这时候追求“完全一致”不如接受合理退化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
