text-decoration-thickness必须与text-decoration-line配合使用才生效，单独设置不显示装饰线；推荐用0.08em单位适配响应式，firefox不支持且@supports检测不可靠，建议伪元素方案兼容。
text-decoration-thickness 必须和 text-decoration-line 一起用
单独写 text-decoration-thickness: 0.08em 不会显示任何下划线——它只管“多粗”，不管“画不画”。浏览器看到没开线，直接跳过渲染。
常见错误是以为 text-decoration: underline 已隐含全部能力，其实它只启用最基础样式；子属性必须显式声明或用简写补全。
- ✅ 正确写法（分步）：
text-decoration-line: underline;+text-decoration-thickness: 0.08em; - ✅ 正确写法（简写）：
text-decoration: underline solid currentColor 0.08em;（注意顺序：line style color thickness） - ❌ 错误写法：
text-decoration-thickness: 2px;（没 line，没效果）
Safari 15.4+ 下粗细不生效的真正原因
Safari 不是“不支持”，而是实现更严格：它只认具体数值（如 0.08em、1.2px），对 auto 和 from-font 基本忽略；更关键的是，一旦你用了 text-decoration 简写（哪怕只是 underline red），Safari 就会丢弃后续所有 Level 4 子属性，包括 text-decoration-thickness。
实操建议：
- 避免混用简写和子属性，整套用子属性声明：
text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness全部显式写出 - 单位优先选
0.08em，比2px更适配响应式；别用ex，字体差异大且 Safari 支持不稳定 - 在 Safari 开发者工具里检查 computed styles，如果
text-decoration-thickness显示为unset，基本就是被简写干扰了
Firefox 完全不支持，@supports 检测不可靠
截至 2026 年 6 月，Firefox 仍标记该属性为 “Not planned”，即无计划实现。更麻烦的是，@supports (text-decoration-thickness: 1px) 在部分旧版 Chrome/Edge 中返回 true，但实际不渲染——因为它们识别属性名却不实现功能。
这意味着：
- 不能靠
@supports安全降级，也不能指望渐进增强自动兜底 - 硬加
!important或覆盖规则无效，Firefox 直接忽略该属性 - 务实方案是用伪元素模拟：
::after+position: absolute+bottom: 0.2em+height: 1.5px，兼容 IE11+ - 若坚持用原生属性，至少加 fallback：
text-decoration: underline;+text-decoration-color: #0066cc;，确保 Firefox 至少保留基础下划线
用 border-bottom 模拟时怎么避免换行错位
直接给文本元素加 border-bottom 看似简单，但在多行、含 descender 字母（g/j/p/q/y）、line-height 变化时会立刻出问题：线条压字、只出现在最后一行、撑满整行宽度。
正确做法是用伪元素：
- 父容器设
position: relative，且line-height ≥ 1.4 -
::after设content: ""、position: absolute、bottom: 0.2em（避开 descender）、width: 100%、height: 1.5px - 若内容可能换行，加
white-space: pre-wrap，并确保伪元素不破坏盒模型 - 想随
font-size缩放？别用固定px，改用height: 0.09em，再配合transform: scaleY(1)微调精度
复杂点不在写法本身，而在 descender 位置、line-height 与绝对定位的耦合关系——稍一疏忽，下划线就贴着字母尾巴跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
