text-underline-offset在safari 15.4+和firefox 70+中支持，但safari ≤15.3完全不识别，firefox 70–89对负值、auto及与text-decoration-thickness组合时行为不稳定；未生效主因是缺失text-decoration: underline、父元素display/vertical-align干扰、仅伪类声明或混用text-underline-position。
text-underline-offset 在 Safari 和 Firefox 的实际支持情况
它在 Safari 15.4+ 和 Firefox 70+ 中可用，但 Safari ≤15.3 完全不识别该属性，会静默退回到紧贴文字底部的默认下划线；Firefox 70–89 支持基础功能，但对负值、auto 值或与 text-decoration-thickness 组合时行为不稳定。
为什么写了 text-underline-offset 却没反应
最常见原因不是浏览器不支持，而是写法或上下文出错：
-
text-decoration: underline缺失——这是硬性前提，没它text-underline-offset完全无效 - 父元素用了
display: inline-block或设置了vertical-align，Safari ≤15.3 会直接忽略 offset - 只在伪类里声明（如
a:hover { text-underline-offset: 4px; }），但未给默认状态设值，导致:link下仍是浏览器原生偏移 - 混用了
text-underline-position: under，它和text-underline-offset冲突，现代浏览器优先认后者，但叠加后可能失效
用 @supports 做兼容性降级是否可靠
是，但必须写对条件：
- 检测要覆盖所有旧环境：
@supports not (text-underline-offset: 0.1em) or (-webkit-text-underline-offset: 0.1em) - 降级方案别用
border-bottom：它无法自动适配字体 descender 区域，多行文本中易错位 - 推荐用伪元素 +
background-image模拟，例如：background-image: linear-gradient(to bottom, currentColor 0%, currentColor 1px, transparent 1px);<br>background-position: bottom 0.15em;<br>background-size: 100% 1px;
- 别依赖
text-underline-offset: auto做兜底——Safari 和 Firefox 计算逻辑不同，视觉留白差异可达 2px
跨字体下划线留白不一致的根本原因
不是 CSS 写错了，而是字体自身的 underlinePosition 和 underlineThickness 度量值被浏览器读取并参与计算。同一段 text-underline-offset: 0.25em 在思源黑体和 Georgia 下，因 descender 深度不同，视觉距离可能差出 1.5px。
真要统一效果，得结合 @font-face 的 font-underline-offset（目前仅 Firefox 支持，且需字体文件提供元数据）——但这属于边缘场景，日常开发中更务实的做法是：固定组件用 px 单位，正文流式排版接受合理浮动，不强求像素级一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
