首选text-decoration: underline，因它专为视觉装饰设计，兼容IE6+，支持继承与精细控制；禁用<u>标签因其语义化（如拼写错误标注），非装饰用途。
直接用 text-decoration: underline，别碰 <u> 标签——它现在有语义含义，不是装饰开关。
为什么 text-decoration: underline 是首选
它专为视觉装饰设计，天然支持继承、可复用、能精细控制颜色/粗细/偏移，且 IE6+ 全兼容。常见错误是只写 text-decoration: underline 却忽略父级干扰：比如外层容器设了 text-decoration: none，子元素不会自动“恢复”下划线；或者误用 text-decoration-line: underline（CSS Text Decoration Level 3），老浏览器直接不认。
推荐写法始终是：text-decoration: underline（基础兼容）或 text-decoration: underline solid #007bff（带颜色和线型，Chrome 89+/Firefox 70+ 支持）。
怎么避免和链接下划线混淆
用户看到下划线第一反应是“可点击”，尤其在移动端没有 hover 提示。必须主动区分：
立即学习“前端免费学习笔记（深入）”；
- 非链接文本用灰黑色下划线（如
#333），链接保持蓝色或自定义色 - 把链接的默认下划线关掉：
a { text-decoration: none; }，再用border-bottom或text-decoration重绘，统一风格 - 真要强调语义（如拼写错误），才用
<u class="spelling">配合text-decoration-style: wavy，而非纯视觉需求
下划线位置或粗细不理想？调这两个属性
默认下划线离文字距离、粗细由字体决定，思源黑体比 Helvetica 更靠下，容易和 g、y 的 descender 重叠。现代浏览器（Chrome 89+、Firefox 70+、Safari 15.4+）支持：
-
text-underline-offset: 2px：正值上移，负值下移；慎用0.1em，小字号下几乎不可见 -
text-decoration-thickness: 1px：固定粗细；auto会随字体变化，不可控
不支持的浏览器会安静回退到默认下划线，无报错但效果不一致——所以关键场景建议先测目标环境。
多行文本下划线中断？这不是 bug
下划线是行内渲染效果，换行即截断。这不是缺陷，是规范行为。想让整段都有连续下划线：
- 确保容器足够宽、没强制
white-space: nowrap或display: inline-block拆分内容 - 别用
border-bottom模拟——它会撑高行距，且无法对齐 descender - 若必须跨行连续（比如法律条文专有名词），考虑用
background-image: linear-gradient()+background-position手动模拟，但维护成本高
真正容易被忽略的是字体差异带来的下划线位置漂移——同一套 CSS 在不同系统字体下表现可能完全不同，上线前务必在 Windows/macOS/iOS/Android 上实机核对。
