必须先写text-decoration: underline，否则text-underline-offset完全无效；它仅作用于已启用的下划线，且受display、vertical-align、伪类缺失、旧规范冲突等因素影响，单位推荐px或em，需配合text-decoration-thickness微调避免压字。
必须先写 text-decoration: underline，否则 text-underline-offset 完全无效。 这是绝大多数人卡住的第一步——它不是全局调节器，只作用于已启用的下划线。
为什么写了 text-underline-offset 却没反应
常见错误现象：加了 text-underline-offset: 2px，下划线位置完全不动。
- 漏了
text-decoration: underline（或text-decoration-line: underline），这是前提条件 - 父元素用了
display: inline-block或设置了vertical-align，尤其在旧版 Safari 中会触发降级，忽略 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方案 - 兼容性兜底推荐用
@supports：比如先写基础text-decoration: underline，再用@supports (text-underline-offset: 0.2em)包裹增强样式
最常被忽略的一点：字体本身决定 descender 深度和基线位置。同一 text-underline-offset: 0.2em 在思源黑体和 Times New Roman 下观感差异明显——这不是 bug，是字体特性，得接受弹性适配，别死磕绝对像素对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
