首选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 上实机核对。



















