text-decoration-skip-ink 无效果是因为仅在纯文本且 text-decoration: underline 时生效，遇 inline-block、background 或 vertical-align 等会失效；建议优先使用 text-underline-offset。
text-decoration-skip-ink 为什么没效果
因为浏览器默认启用智能跳过文字笔画的下划线（比如跳过字母“g”“y”的下坠部分），但这个行为只在 text-decoration: underline 且内容是纯文本时生效；一旦你加了 display: inline-block、用了 background、或者套了 span 且设置了 vertical-align，text-decoration-skip-ink 就可能被忽略。
实操建议：
- 优先用
text-underline-offset控制位置，它比依赖 skip-ink 更可靠 - 如果必须兼容旧版 Safari（text-underline-offset 不支持，得退回到
border-bottom模拟 - 避免给下划线元素设
line-height: 1或极小值——这会让text-underline-offset计算失准
用 text-underline-offset 精确控制下划线距离
这是目前最直接、语义最正的方案：它接受长度值（px、em、rem）或关键字（auto），数值越大，下划线离文字基线越远。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
text-underline-offset: -2px想上移结果消失——负值超出字体下坠区后，下划线会被裁掉 - 设
text-underline-offset: 0.2em在不同字号下表现不一致——推荐用px做绝对控制，尤其在按钮/标签等固定高度场景 - 和
text-decoration-thickness搭配时，厚度变大会挤压偏移空间，需同步微调 offset
示例：
a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
用 border-bottom 替代时 vertical-align 是关键
当需要下划线完全脱离文字基线、或要加阴影/渐变/圆角等 CSS 无法通过 text-decoration 实现的效果时，border-bottom 是唯一可行路径。但它不是“换行就完事”，vertical-align 才决定位置是否对齐。
使用场景：
- 按钮文字带下划线但要求下划线始终距容器底边 2px（比如 Ant Design 的 link 按钮）
- 下划线要做 hover 上浮动画——
border-bottom可以配合transform: translateY()，而原生下划线不行 - 需要下划线颜色随文字变色但粗细不变（
currentcolor在border-bottom中稳定支持）
容易踩的坑：
- 默认
vertical-align: baseline会让border-bottom贴着父容器基线，而不是文字本身；改用vertical-align: bottom或text-top后需测试多行文本是否错位 - 行内元素用
border-bottom后若未设padding-bottom，下划线会紧贴文字，视觉上像“压进字里”
Firefox 下 text-underline-offset 表现异常怎么办
Firefox 115+ 支持 text-underline-offset，但有个隐藏行为：它会把该属性值叠加到字体自身的下划线默认位置上，而 Chrome/Safari 是直接替换。所以同一段代码，在 Firefox 中下划线往往比预期更低。
解决思路：
- 加前缀 hack：用
@supports (-moz-appearance: none)单独给 Firefox 减去 1–2px 偏移 - 更稳妥的做法是统一用
border-bottom + calc()，例如：a { border-bottom: 2px solid currentcolor; padding-bottom: calc(2px + 0.1em); } - 别依赖「全局重置」类库自动处理——这类工具通常只覆盖
text-decoration，不管 offset 兼容性
复杂点在于：下划线位置从来不是单一 CSS 属性能一锤定音的事，它受字体度量、行高计算、渲染引擎差异三重影响。哪怕写对了所有属性，换一个系统自带字体（比如 macOS 的 SF Pro 和 Windows 的 Segoe UI），实际像素位置也可能差 1px。
