text-decoration-thickness 单独设置无效，必须配合 text-decoration-line 使用；下划线变粗后易压字，需同步设置 text-underline-offset；firefox 不支持该属性，可靠 fallback 是伪元素模拟或基础下划线。
text-decoration-thickness 单独设置无效？必须配 text-decoration-line
直接写 text-decoration-thickness: 2px 不会显示任何下划线——它只是“粗细”，不是“开关”。浏览器根本不会渲染装饰线，除非你明确告诉它画哪条线。
常见错误是只设粗细、忘了声明类型；或者误以为 text-decoration: underline 已隐含全部能力，其实它默认不启用 text-decoration-thickness 的控制权。
-
th { text-decoration-line: underline; text-decoration-thickness: 0.08em; }✅ 正确，显式声明类型 + 粗细 -
th { text-decoration: underline solid currentColor 0.08em; }✅ 简写，注意顺序：line → style → color → thickness -
th { text-decoration-thickness: 2px; }❌ 错误，没text-decoration-line，完全没效果
为什么下划线变粗后容易“压字”？必须同步设 text-underline-offset
text-decoration-thickness 只管粗细，不管位置。粗线会让下划线视觉重心下移，尤其在小字号 th（比如 font-size: 14px）里，很容易切到字母 g、y 的 descender 部分，看起来像被截断。
默认 text-underline-offset: auto 计算不可靠，不同浏览器结果差异大。
- 推荐同步设置：
text-underline-offset: 0.15em（比0.08em粗细略大一点，视觉更平衡） - 避免负值：
text-underline-offset: -1px在 Firefox 和部分 Safari 中会导致线消失或错位 - 中英文混排的表头建议统一用
em单位，比px更稳
Firefox 不支持 text-decoration-thickness，别信 @supports
截至 2026 年 7 月，Firefox（v128）仍标记该属性为 “Not planned”，完全不支持。更麻烦的是，@supports (text-decoration-thickness: 1px) 在旧版 Chrome/Edge 中可能返回 true，但实际不渲染——识别属性名却不实现功能。
这意味着不能靠 @supports 安全降级，也不能指望渐进增强自动兜底。
- 务实 fallback：
th { text-decoration: underline; text-decoration-color: #333; }（至少保留基础下划线） - 真正可靠方案：用
::after伪元素模拟下划线，例如：th::after { content: ""; display: block; height: 2px; background: #333; margin-top: 0.1em; } - 别写
@supports (text-decoration-thickness: auto)——这个检测本身就不稳定
单位选 em 还是 px？优先用 em 或 from-font
text-decoration-thickness 支持 px、em、rem、ex 和 from-font。但 px 在响应式场景下容易失配：字号缩放时，下划线粗细不变，视觉比例就崩了。
-
em是当前元素font-size的倍数，随字号缩放，推荐用于表格表头、标题等强调区域 -
from-font由字体自身定义（如某些字体内置推荐下划线粗细），兼容性差，仅 Chromium 系最新版支持，慎用 - 避免混用单位：比如
text-decoration-thickness: 0.08em配text-underline-offset: 4px，会导致缩放时偏移量固定而粗细变化，视觉失衡
text-decoration-thickness 后，没动 text-underline-offset，结果下划线直接贴着字母底部，用户第一反应是“样式出 bug 了”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
