text-decoration-thickness 在旧版 firefox、safari≤15.4 和所有 ie 中被 css 解析器直接忽略，@supports 检测不可靠；safari 15.4+ 仅支持具体数值且需拆解 level 4 属性、禁用简写；fallback 应用 text-decoration: none + ::after 模拟下划线，确保兼容性。
text-decoration-thickness 在旧版浏览器（Firefox、Safari ≤15.4、所有 IE）中根本不会生效，不是“渲染异常”，而是 CSS 解析器直接跳过整条声明——连 @supports (text-decoration-thickness: 1px) 都不可靠。
Firefox 和旧 Safari 根本不解析该属性
截至 2026 年 10 月，Firefox 仍标记为 “Not planned” 支持 text-decoration-thickness；Safari 12.0 及更早版本、所有 IE 版本完全忽略该声明。这不是兼容性降级，是语法层面的丢弃：浏览器压根不认这个属性名，后续规则照常解析，但该行样式等于没写。
常见错误现象：
- 开发者工具里 computed styles 显示
text-decoration-thickness: unset或干脆不出现 -
@supports (text-decoration-thickness: 1px)在 Firefox 中返回true却不渲染（部分旧版 Chrome/Edge 同样存在此 bug） - 写了
text-decoration-thickness: 2px，但下划线粗细始终是浏览器默认值
Safari 15.4+ 的“伪支持”陷阱
Safari 并非完全不支持，而是实现极严苛：它只接受具体数值（如 0.08em、1.2px），对 auto 和 from-font 直接忽略；更关键的是，它要求 Level 4 属性必须成套声明，且严禁与 Level 3 简写混用。
错误写法示例：
code {
text-decoration: underline red;
text-decoration-thickness: 2px; /* Safari 直接丢弃这一行 */
}
正确做法必须显式拆解：
- 必须同时声明
text-decoration-line、text-decoration-color、text-decoration-style - 不能出现任何
text-decoration简写（哪怕只在父元素里） - 若漏掉
text-decoration-color，Safari 可能整体降级，导致thickness失效
别指望 fallback 规则自动接管
浏览器不会因为 text-decoration-thickness 被忽略，就“让出控制权”给后面的 border-bottom。下面这段代码会出双线：
a {
text-decoration-thickness: 2px;
border-bottom: 2px solid currentColor;
}
原因：
-
text-decoration-thickness被忽略 → 原生下划线仍按默认粗细渲染 -
border-bottom无条件叠加 → 出现两条线，且位置错开 - 真正可靠的 fallback 是主动禁用原生线：
text-decoration: none，再用::after模拟
为什么伪元素方案反而更稳
用 ::after + position: absolute 模拟下划线，绕开了所有原生属性的兼容黑洞：
-
border-bottom在::after上完全受控，不会和原生线冲突 -
transform: translateY(2px)可精准避让 descender（g/y/q 下伸部分） -
em单位在伪元素中继承稳定，比text-decoration-thickness: from-font更可靠 - Firefox 和 Safari 都 100% 支持
::after+absolute+bottom: 0
真正容易被忽略的点是：伪元素的 font-size 必须显式继承，否则 0.08em 会失准——尤其当父元素用了 rem 或缩放 CSS 变量时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
