真正能落地的下划线方案需分场景：现代浏览器用text-decoration-line/color/thickness/offset四属性组合；旧safari或outlook等环境改用border-bottom加transform微调；局部下划线须拆dom结构，禁用标签。
直接用 text-decoration: underline 会出问题——不是下划线盖住字母 g/y/p，就是换行断开、深色主题下看不见、老浏览器不兼容。真正能落地的方案得拆开看场景。
text-decoration-line + color + thickness + offset 必须一起写
只写 text-decoration: underline 是最常见踩坑点：它会把 text-decoration-color、text-decoration-thickness、text-underline-offset 全部重置为浏览器默认值。结果就是下划线紧贴 baseline，g、y、p 的降部被压住；颜色继承文字色，在深灰背景上直接消失；粗细是不可控的 auto。
正确写法是显式声明全部关键子属性：
-
text-decoration-line: underline（启用） -
text-decoration-color: #007bff（别依赖继承） -
text-decoration-thickness: 2px（避开auto的模糊行为） -
text-underline-offset: 4px（给 descender 留空间，避免糊字）
这四条合起来才是现代下划线的最小安全集。Chrome 89+、Firefox 70+、Safari 15.4+ 都支持，但 Safari ≤15.3 会忽略后两项——得准备降级方案。
旧 Safari / Outlook 里下划线断掉？改用 border-bottom
当目标环境包含 Safari ≤15.3 或 Outlook（尤其是 Windows 版），text-underline-offset 和 text-decoration-thickness 会静默失效，且 text-decoration 在换行时可能断裂。此时 border-bottom 是唯一稳定选择。
但要注意它不是“下划线”，而是“底线”：
- 它对齐的是盒子底边，不是文字 baseline，得加
transform: translateY(2px)微调垂直位置 - 它算进
line-height，可能把段落撑高，需手动减padding-bottom补偿 - 换行时它会在每行末尾中断，而
text-decoration会自动跨行连续 - 千万别用
margin-bottom模拟间距——会推开下一行，破坏排版流
只想给局部文字加下划线？必须拆 DOM，不能靠父元素样式
如果 HTML 是 <div class="btn">导出 (PDF)</div>，你给 .btn 加 text-decoration: underline，整个字符串都会被划上——因为该属性作用于整个文本流，不是按词切分的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是提前拆开结构：
<div class="btn"> <span class="underline-trigger">导出</span> (PDF)</div>
再单独定义：
.underline-trigger {
text-decoration-line: underline;
text-underline-offset: 3px;
}
禁用 <u></u> 标签：它在 HTML5 中语义已变，屏幕阅读器可能读作“拼写错误”，纯视觉需求必须用 CSS。
表格某行加下划线？border-bottom 必须作用在 td/th 上
<tr class="underline"> 直接加 <code>border-bottom 无效，浏览器会忽略。下划线必须落到单元格上。
推荐写法：
.underline td,
.underline th {
border-bottom: 1px solid #000;
}
若表格启用了 border-collapse: collapse，相邻行的边框可能合并导致视觉断裂，此时改用 box-shadow 更干净：
.underline td {
box-shadow: 0 1px 0 0 #000;
}
动态加下划线？用 JS 切换 class，别直接写 element.style.borderBottom——内联样式难覆盖、难维护。
复杂点其实在适配权衡：你得同时判断三件事——是否需要跨行连续、是否必须兼容旧 Safari、是否允许用 transform 微调。选错了，轻则下划线盖字，重则整段行高崩掉、换行断裂、可访问性报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
