text-underline-offset在safari≤15.3等旧浏览器中完全不识别，需与text-decoration: underline成对使用，兼容性差时应通过::after伪元素模拟下划线并用bottom控制偏移。
为什么text-underline-offset在Safari ≤15.3里完全不生效
不是偏移不准，是压根不识别——浏览器静默丢弃该声明，下划线退回默认紧贴 descender 的位置。IE 所有版本、Android 4.4–6.x WebView、部分旧版 Electron 同样如此。查 CanIUse 或 MDN 就能确认：这个属性的兼容性缺口非常明确，不是渐进式降级，而是“有或无”的开关。
怎么写才能让text-underline-offset真正起作用
它不是独立开关，必须和 text-decoration: underline 成对出现，否则无效。常见失效场景包括：
- 漏写
text-decoration: underline（最常见） - 只在伪类里设，比如
a:hover { text-underline-offset: 4px; }，但a:link没配，导致默认状态无偏移 - 父元素用了
display: inline-block或设置了background-color，某些旧 Safari 会触发渲染降级 - 混用
text-underline-position: under，和text-underline-offset冲突，现代浏览器优先认后者，但共存时行为不可预测
兼容性兜底不能只靠@supports
@supports (text-underline-offset: 0.2em) 能检测支持，但无法解决旧 Safari 下下划线“压字”的视觉问题——它只是回退到浏览器默认位置，而那个位置在 Inter 和 IBM Plex Sans 等字体下本身就偏低，看着像被截断。
- 真要覆盖，得用
::after+position: relative模拟：父元素设position: relative，伪元素用bottom: -6px控制等效偏移 - 别用
transform: translateY(6px)替代bottom，因为伪元素原始位置在 baseline，受字体度量影响大，多行或换字体时容易错位 - 高度推荐用
height: 0.0625em这类相对单位，随字号缩放；必须写content: ""，否则伪元素不渲染
和text-decoration-thickness搭配时容易踩的坑
线越粗，越容易“压”进字母 g/y 的 descender 区，必须同步调高 offset：
- 先定
text-decoration-thickness，再微调text-underline-offset；比如厚度设为2px，offset 就得从默认2px提到3px～4px - 避免
text-underline-offset: auto混搭加粗——它会退回到字体自带 baseline 偏移，和粗线视觉重量不匹配 - 安卓旧 WebView 对这两个属性组合支持不稳定，若发现下划线忽高忽低，直接降级为
border-bottom更稳妥
::after 重写下划线，text-underline-offset 就彻底失效了——它只作用于原生 text-decoration。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
