text-underline-offset 仅在 text-decoration: underline 存在时生效；需避免与 text-underline-position 冲突，优先用 px 单位，搭配 text-decoration-thickness 时需同步增大 offset，并注意 Safari ≤15.3 等旧版兼容问题。
text-underline-offset 不是独立生效的开关，它只对已启用下划线的元素起作用——没写 text-decoration: underline，这个属性就完全无效。
为什么加了 text-underline-offset 却没反应
这是最常卡住人的地方。现象是写了 text-underline-offset: 2px，但下划线纹丝不动。
- 漏了基础声明：
text-decoration: underline必须显式存在，否则 offset 没作用对象 - 祖先元素用了
display: inline-block或设置了background-color，某些 Safari 旧版本（≤15.3）会直接忽略该属性 - 只在伪类里设了偏移，比如
a:hover { text-underline-offset: 4px; }，但a:link没配，导致默认状态仍是浏览器原生偏移 - 混用了
text-underline-position: under，它和text-underline-offset冲突，现代浏览器优先认后者，但叠加后行为不可预测
单位选 px 还是 em？别凭感觉
单位选错，会导致响应式失效或跨组件不一致。
- 按钮、标签、固定字号场景，一律用
px：比如text-underline-offset: 3px，绝对可控，设计稿对齐无歧义 - 正文流式排版中可试
em，但要注意：子元素若改了font-size（如span套小号字），偏移量仍按父级em计算，未必随内容缩放 - 避免用
rem或百分比——它们依赖根字体或自身尺寸，在嵌套或动态字号下极易失准 -
auto值不推荐做兜底：Safari 和 Firefox 对它的解释差异明显，视觉留白不统一
和 text-decoration-thickness 搭配时的微调逻辑
线越粗，越容易“压”进文字 descender 区（比如字母 g/y 的下半部分），必须同步调高 offset。
立即学习“前端免费学习笔记（深入）”；
- 先定厚度：比如
text-decoration-thickness: 2px - 再调偏移：通常要从默认的
2px提到3–4px，才能保持视觉呼吸感 - 别用
text-underline-offset: auto配合加粗——它会退回到字体自带 baseline 偏移，和粗线不匹配 - 安卓 WebView（尤其旧版）对这组组合支持不稳定，若发现部分设备下划线忽高忽低，建议降级为
border-bottom方案
兼容性兜底不能只靠 @supports
text-underline-offset 在 Safari 15.4+、Firefox 70+、Chrome 95+ 支持良好，但 Safari ≤15.3 完全不识别，且静默忽略。
仅靠 @supports not (text-underline-offset: 0.1em) 加降级样式还不够——有些老 Safari 会把 text-decoration: underline 渲染成紧贴 descender 的粗线，看着像被截断。真要覆盖，得用 background-image: linear-gradient 模拟，并手动控制 background-position 的垂直偏移，同时注意 line-height 对齐问题。
字体本身也会影响最终效果：Inter 和 IBM Plex Sans 的默认下划线位置就不同，同一段 CSS 在不同字体下“看起来”的留白可能差 1px 以上。日常开发建议直接在 DevTools Layout 面板里拖动实时调，比查文档估算更靠谱。
