firefox 和旧 safari 不支持 text-decoration-thickness，css 解析器直接跳过该声明，@supports 检测不可靠；应以 ::after 伪元素为主方案，显式设 text-decoration: none，并用 position: relative + absolute + transform 微调下划线位置与粗细。
text-decoration-thickness 在 Firefox 和旧 Safari 中根本不会渲染
截至 2026 年 6 月，Firefox 仍标记为 “Not planned” 支持 text-decoration-thickness，Safari 12.0 及更早版本、所有 IE 版本也完全忽略该属性——不是显示异常，而是 CSS 解析器直接跳过整条声明，连 @supports (text-decoration-thickness: 1px) 都不可靠。部分旧版 Chrome/Edge 甚至会返回 true 却不渲染，导致降级逻辑失效。
别指望 fallback 规则自动接管
text-decoration-thickness: 2px 和 border-bottom: 2px solid currentColor 不会互斥生效：前者被忽略时，后者仍会无条件叠加，造成双线或错位。浏览器不会因为原生属性失效就“让出控制权”。
- 错误做法：
text-decoration-thickness: 2px; border-bottom: 2px solid #007bff; - 正确思路：把伪元素方案作为主路径，原生属性仅作增强
- 必须显式禁用原生下划线：
text-decoration: none;，否则伪元素和原生线可能重叠
用 ::after 伪元素模拟下划线的三个关键点
直接加 border-bottom 在 inline 元素上会撑宽、压 descender（g/y/q 等字母下伸部分）、换行时断开；::after + 绝对定位才是可控解法：
- 给目标元素设
position: relative;，确保伪元素定位基准正确 -
::after使用content: ""+position: absolute+bottom: 0，再通过transform: translateY(2px)微调避让 descender - 宽度设为
width: 100%，但需配合white-space: nowrap或 JS 动态计算多行文本宽度（复杂场景才需）
单位选 em 还是 px？这里容易被忽略
用 0.08em 是为了随 font-size 缩放，但前提是伪元素的 font-size 继承自父级——如果父元素用了 rem 或缩放 CSS 变量，而伪元素未显式继承，粗细就会失准。Firefox 虽不支持 text-decoration-thickness，但它完全支持 em 单位的伪元素边框，这点反而比原生属性更稳。
真正麻烦的是 Safari 对 ex 单位的处理：不同字体 x-height 差异极大，且 Safari 15.4+ 仍存在渲染抖动，一律避开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
