必须先写text-decoration: underline，否则text-underline-offset完全无效；它仅作用于已启用下划线的元素，单位推荐px以保精准，搭配text-decoration-thickness时需同步增大偏移，负值慎用以防裁切，旧版safari及安卓webview存在兼容问题。
必须先写 text-decoration: underline，否则 text-underline-offset 完全无效。 它不是全局调节器，只作用于已启用的下划线——这是 90% 人调试失败的第一步。
为什么写了 text-underline-offset 却没反应
常见错误现象：加了 text-underline-offset: 2px，下划线位置纹丝不动。
- 漏了
text-decoration: underline（或text-decoration-line: underline），这是硬性前提 - 父元素用了
display: inline-block或设置了vertical-align，尤其在 Safari ≤15.3 中会静默忽略 offset - 只在伪类里设，比如只写了
a:hover { text-underline-offset: 4px; }，但a:link没设，导致默认偏移仍生效 - 混用了
text-underline-position: under—— 这是旧规范，和text-underline-offset冲突，现代浏览器优先认后者，但共存时行为不可预测
text-underline-offset 的单位怎么选：px 还是 em
单位选错会导致响应式失准或嵌套错位。
- 固定尺寸组件（按钮、标签、导航项）用
px：text-underline-offset: 2px绝对可控，适合设计稿明确要求“距文字底边 2px” - 正文流式排版可考虑
em，但注意：它按当前元素的font-size计算；若子元素有font-size: 0.8em，text-underline-offset: 0.1em仍按父级字号算，不是子级 - 避免用
rem或百分比做基础偏移——它们依赖根字体或自身字体，在嵌套或动态字号场景下极易失准 - 负值慎用：
text-underline-offset: -1px可能让下划线穿进字母g/y的 descender 区；-2px起就可能被裁掉，视觉上“消失”
和 text-decoration-thickness 一起用时的典型坑
线越粗，越容易“压”文字；不调偏移的话，加粗后下划线反而显得更贴近甚至粘连。
- 先定厚度，再微调偏移：比如
text-decoration-thickness: 2px后，通常要把text-underline-offset从默认的2px提到3px～4px - 别用
auto值混搭厚度——text-underline-offset: auto会退回到字体自带的 baseline 偏移，和加粗后的视觉重量不匹配 - 安卓 WebView（尤其旧版）对这两个属性组合支持不稳定，若发现部分设备下划线忽高忽低，建议降级为
border-bottom方案
真正难的是跨字体一致性：同一 text-underline-offset: 0.25em 在思源黑体和 Georgia 下，因 descender 深度不同，视觉距离可能差出 1.5px。如果项目强依赖多字体渲染，得用 ex 单位或直接放弃该属性，改用 ::after + bottom 手动锚定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
