text-decoration-thickness 必须与 text-decoration-line 同时使用才生效，单独设置无效；需配合 text-underline-offset 避免压字，推荐用 em 单位并辅以伪元素降级。
text-decoration-thickness 必须和 text-decoration-line 一起用，单独写无效
直接给 th 元素加 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; }（没 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
表格列宽常随内容伸缩，字体大小也可能因响应式调整（比如移动端缩为 12px），固定 px 值容易失衡：小字号下显得太粗，大字号下又太细。
em 随 font-size 缩放，更适合表格这种需要保持比例关系的场景。
- 推荐起点：
text-decoration-thickness: 0.08em（≈ 字体大小的 8%，在 12px–18px 区间表现稳定） - 慎用
ex：依赖字体 x-height，Inter 和 Times New Roman 的ex值能差一倍，Safari 支持也不稳 - 避免混用单位：比如
text-decoration-thickness: 1px和text-underline-offset: 0.1em容易错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
