text-decoration-thickness必须配合text-decoration-line才能生效，单独设置无效；推荐使用0.08em单位以适配响应式，Firefox不支持该属性且@supports检测不可靠，建议用伪元素方案兼容。

text-decoration-thickness 必须配合 text-decoration-line 才生效

单独写 text-decoration-thickness: 2px 不会显示任何下划线——它只是“粗细”，不是“开关”。必须先用 text-decoration-line: underline（或 line-through、overline）声明要画哪条线，否则浏览器压根不渲染装饰线。

常见错误是只设粗细，忘了开线；或者误以为 text-decoration: underline 已隐含全部能力，其实它默认只启用最基础样式，子属性需显式设置或用简写补全。

• 正确写法一（分步）：text-decoration-line: underline; text-decoration-thickness: 2px;
• 正确写法二（简写）：text-decoration: underline solid currentColor 2px;（注意顺序：line style color thickness）
• 错误写法：text-decoration-thickness: 2px; —— 没 line，没效果

单位选 em 还是 px？优先用 0.08em 而非 1px

em 值随 font-size 缩放，更适合响应式场景；px 固定，小字号下可能太粗、大字号下又太细。实测 0.08em 是较稳妥的起始值，接近多数字体在 16px 下的默认下划线视觉粗细。

慎用 ex 单位——它依赖字体 x-height，不同字体差异极大（比如 Inter 和 Times New Roman 的 ex 值能差一倍），且 Safari 对 ex 支持不稳定。

立即学习“前端免费学习笔记（深入）”；

• 推荐：text-decoration-thickness: 0.08em;
• 可用但需测试：text-decoration-thickness: 2px;（适合固定字号布局）
• 避免：text-decoration-thickness: 0.5ex;（兼容性差 + 不可控）

Firefox 不支持 text-decoration-thickness，且 @supports 检测不准

截至 2026 年 5 月，Firefox 仍不支持 text-decoration-thickness（官方状态为 “Not planned”）。更麻烦的是，@supports (text-decoration-thickness: 1px) 在部分旧版 Chrome/Edge 中会返回 true，但实际不渲染——因为它们识别属性名却不实现功能。

这意味着不能靠 @supports 安全降级，也不能指望渐进增强自动兜底。

• 务实方案：用伪元素重写下划线（::after + border-bottom），完全可控且兼容 IE11+
• 若坚持用原生属性，至少加一层 fallback 颜色和样式：text-decoration: underline; text-decoration-color: #0066cc; text-decoration-thickness: 0.08em; —— Firefox 至少保留基础下划线
• 别写 @supports (text-decoration-thickness: auto) 做条件加载，它在 Safari 15.6 上也返回 true 但无效

和 text-underline-offset 混用时，单位必须统一

text-underline-offset 控制下划线离文字基线的距离，常和 text-decoration-thickness 配合调整视觉平衡。但二者单位不一致会导致错位：比如 thickness: 1px + offset: 0.1em，当字体缩放时，下划线会“漂移”或贴到文字上。

解决办法是全部用相对单位，或全部用绝对单位。

• 安全组合一（全相对）：text-decoration-thickness: 0.08em; text-underline-offset: 0.15em;
• 安全组合二（全绝对）：text-decoration-thickness: 1.5px; text-underline-offset: 2px;
• 危险组合：text-decoration-thickness: 1px; text-underline-offset: 0.1em; —— 尤其在 rem 布局中易出问题

真正难的不是写对那行 CSS，而是判断什么时候该放弃原生属性——比如项目要支持 Firefox 或需要波浪线+粗细+偏移三者联动时，伪元素方案反而更省调试时间。