text-underline-offset是控制下划线与文字基线距离的专用属性，需配合text-decoration: underline使用，不支持旧浏览器，负值易裁切，单位推荐px以保证精准。
text-underline-offset 是目前控制下划线离文字距离最直接、语义最正的方案，但它不是万能开关——不设 text-decoration: underline 就没效果，老浏览器会静默忽略，负值还容易裁掉线。
为什么写了 text-underline-offset 却没反应
常见错误现象：加了 text-underline-offset: 2px，但下划线位置纹丝不动。
- 没配
text-decoration: underline——这个属性只作用于已启用的下划线，不是“全局调节器” - 父元素或祖先元素用了
display: inline-block、vertical-align或背景色，触发了浏览器对text-underline-offset的降级处理（尤其 Safari 旧版） - 写在了伪类里但漏了其他状态，比如只写了
a:hover { text-underline-offset: 4px; }，而a:link没设，导致默认偏移仍生效 - 用了
text-underline-position: under——这个是旧规范，和text-underline-offset冲突，现代浏览器优先认后者，但混用可能让行为不可预测
text-underline-offset 的单位怎么选：px 还是 em
推荐在按钮、标签、固定字号组件中用 px；在正文流式排版中可考虑 em，但要注意继承链里的字体变化会影响最终效果。
-
text-underline-offset: 2px：绝对可控，适合设计稿明确要求“距文字底边 2px”的场景 -
text-underline-offset: 0.1em：随字号缩放，但若子元素font-size变了（比如span里套小号字），偏移量会按父级em计算，未必如预期 - 避免用
rem或百分比做基础偏移——它们依赖根字体或自身字体，容易在嵌套或响应式中失准 - 负值慎用：
text-underline-offset: -1px在多数字体下会让下划线穿进字母 g/y 的 descender 区，再小一点（如-2px）可能直接被裁掉，视觉上“消失”
和 text-decoration-thickness 一起用时的坑
线越粗，越容易“压”文字；不调偏移的话，加粗后下划线反而显得更贴近甚至粘连。
立即学习“前端免费学习笔记（深入）”；
- 先定厚度，再微调偏移：比如
text-decoration-thickness: 2px后，通常要同步把text-underline-offset从2px提到3–4px - 别用
auto值混搭厚度——text-underline-offset: auto会退回到字体自带的 baseline 偏移，和加粗后的视觉重量不匹配 - 安卓 WebView（尤其旧版）对这两个属性的组合支持不稳定，若发现部分设备下划线忽高忽低，建议降级为
border-bottom方案
兼容性 fallback 怎么写才不翻车
Chrome 99+、Firefox 89+、Safari 15.4+ 支持良好；IE 和 Safari ≤15.3 必须降级。别用 @supports 套两层判断，太重；用渐进增强更稳。
- 基础写法（所有浏览器都认）：
a { text-decoration: underline; } - 现代增强（加偏移和颜色）：
a { text-decoration: underline solid #007bff; text-underline-offset: 3px; } - 老浏览器 fallback 不需要额外代码——它们直接忽略
text-underline-offset，但保留原下划线，至少不崩 - 真要完全统一表现（比如按钮下划线必须离底边恒为 2px），就放弃
text-decoration，改用border-bottom: 1px solid currentColor+padding-bottom: 2px，并确保display: inline-block或inline-flex
真正麻烦的不是写不对，而是以为写对了——比如在设计系统里统一设了 text-underline-offset: 0.1em，结果在中文标题（字号大）和英文提示（字号小）里偏移感天差地别。像素值看着死板，反而是最不容易出错的选择。
