优先用text-underline-offset微调下划线位置，兼容老浏览器则用border-bottom模拟；避免标签，因其语义变更且样式不可控；字体差异导致的下划线位置偏移属正常现象，应保持弹性适配。
HTML 里怎么给文字加下划线
直接用 text-decoration: underline，但别只写这一行——浏览器默认会把下划线压在字母 descender（比如 g、y、p 的下半部分）上，看着像粘连，尤其小字号时特别糊。
- 基础写法：
span { text-decoration: underline; } - 想抬高一点下划线？加
text-underline-offset，比如text-underline-offset: 2px（支持 Chrome 89+、Firefox 70+、Safari 15.4+） - 老浏览器不支持
text-underline-offset？用border-bottom模拟：设border-bottom: 1px solid currentColor，再调padding-bottom或line-height控制距离 - 注意：
text-decoration在 inline 元素上生效最稳；块级元素（如div）要加display: inline或inline-block才能按预期画线
下划线穿过了文字底部（比如 y、g 被截断）
这是默认行为，不是 bug。浏览器把下划线画在字体的“underline position”上，而这个位置由字体文件定义，有些字体（比如某些中文黑体或旧版 Windows 字体）把这个位置设得太低。
- 优先试
text-underline-offset，数值从1px开始微调 - 如果要兼容 IE 或老 Safari，改用
border-bottom+padding-bottom组合，完全可控 - 避免用
text-shadow模拟下划线——模糊、发虚、性能差，还挡不住复制粘贴时的干扰 - 别碰
vertical-align来硬拉——会影响整行基线，牵连其他内联元素
需要不同颜色/粗细/样式的下划线
text-decoration 本身支持颜色和线型，但有坑：IE 不支持多值写法，且 text-decoration-color 和 text-decoration-style 在部分安卓 WebView 里表现不稳定。
- 单色细线：用
text-decoration: underline solid #007bff（Chrome/Firefox/Safari 现代版都 OK） - 虚线下划线：
text-decoration: underline dashed，但注意dotted在 Safari 里可能渲染成短横而非点 - 双线或波浪线？只能用
border-bottom-image或伪元素，复杂度陡增，一般真用得少 - 如果样式必须精确且兼容性要求高，老老实实用
border-bottom+background-clip配合渐变做波浪线，但属于非常规需求
为什么 <u></u> 标签不推荐用了
HTML5 把 <u></u> 重新定义为“非文本标注”，比如拼写错误、专有名词、中文专名号，语义变了。它默认样式还是下划线，但行为不可靠：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器可能跳过或误读
<u></u>内容 - CSS 重置样式表（如 normalize.css）常会清掉它的
text-decoration，导致“没下划线却有标签” - 不能单独控制颜色/偏移/粗细，全靠外部 CSS，不如直接用
span+ 类名清晰 - 除非你真在标“中文人名号”或“日文振假名底纹”，否则别用
<u></u>
真正麻烦的是字体差异——同一段 CSS，在 macOS 的 SF Pro 和 Windows 的微软雅黑下，下划线位置可能差 1px，而用户根本不会告诉你他用什么系统。所以别死磕像素级对齐，留点弹性空间更实际。
