默认下划线压在g/y/p下方是因为字体文件定义的underline-position过低，并非CSS控制；应优先用text-underline-offset微调（如2px），现代浏览器支持良好，老版本则降级为border-bottom模拟。
text-decoration: underline 为什么线总是压在 g/y/p 下面？
默认下划线位置由字体文件里的 underline-position 决定，不是 CSS 控制的——很多中文字体（比如思源黑体、微软雅黑旧版）把这个值设得很低，导致线直接穿过 descender 区域，看着像粘连或被截断。
解决办法不是调 vertical-align 或 line-height，而是用现代属性微调：
-
text-underline-offset: 2px往下拉（推荐从1px起试），Chrome 89+ / Firefox 70+ / Safari 15.4+ 支持 - 老浏览器 fallback：用
border-bottom: 1px solid currentColor+padding-bottom: 2px模拟，完全可控但需注意行高影响 - 别用
text-shadow模拟——模糊、复制时带阴影、渲染开销大
要不同颜色/粗细/波浪线，必须拆开写子属性
text-decoration: underline 是简写，只设它会继承浏览器默认的粗细、颜色和样式，容易在深色背景或主题切换后“消失”。
真正可控的写法是显式声明所有子属性：
立即学习“前端免费学习笔记（深入）”；
-
text-decoration-line: underline（必须，否则color和thickness不生效） -
text-decoration-color: #0066cc（不设就继承文字色，暗色背景上可能看不见） -
text-decoration-thickness: 2px（auto看字体，from-font兼容性差） -
text-decoration-style: wavy（支持dotted/dashed/wavy，IE 完全不支持）
例如链接下划线：
a { text-decoration-line: underline; text-decoration-color: #007bff; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
border-bottom 能替代 text-decoration 吗？
能，但代价明确：它会撑开行高、不随字体缩放、subpixel 渲染易发虚，且无法自动跳过字母笔画（text-decoration-skip-ink: auto 的效果 border 没有）。
只在两种情况推荐用 border-bottom：
- 需要精确控制线型（如
double、groove）且不介意手动算padding-bottom - 兼容 IE11 或 Safari
别用它给链接去默认下划线——a { text-decoration: none; border-bottom: 1px solid currentColor; } 看似可行，但键盘聚焦时缺少视觉反馈，违反 WCAG 可访问性要求。
多行文本下划线断开怎么办？
text-decoration 天然按行绘制，换行处必然断开。这不是 bug，是规范行为。
目前没有完美跨行方案：
-
box-decoration-break: clone+display: inline-block可模拟连续效果，但 Safari 对box-decoration-break支持不稳定 - 伪元素
::after+position: absolute可画一条横线，但需 JavaScript 测量文本宽度和行数，维护成本高 - 设计上接受断开——多数场景下用户并不感知，强行“修复”反而增加复杂度
真正麻烦的是中英文混排时下划线飘移：不同字体 baseline 不一致，text-underline-offset 往往只能顾一头。这时候统一 font-family 比硬调 offset 更可靠。
