text-decoration-thickness在Safari 12.0及更早、Firefox 69及更早、所有IE中完全不生效，因其属CSS Text Decoration Level 3，旧引擎仅识别属性名而未实现渲染逻辑。
text-decoration-thickness 在 Safari 12.0 及更早、Firefox 69 及更早、所有 IE 版本中完全不生效，不是“偶尔失效”，而是压根被忽略 —— 这不是 bug，是标准实现进度问题。
为什么 text-decoration-thickness 会被浏览器直接忽略
该属性属于 CSS Text Decoration Module Level 3，但各浏览器内核对它的解析分两步：先识别属性名（语法校验），再执行渲染逻辑。旧版引擎只完成了第一步，所以即使写了 text-decoration-thickness: 2px，计算样式里也查不到它，@supports (text-decoration-thickness: 1px) 在 Safari 12.0 和 Firefox 69 里会返回 false，但 Safari 12.1 却返回 true 却仍不画线 —— 因为它“认得名字，但没写实现”。
更麻烦的是，这种“半支持”无法靠 CSS fallback 自动降级：你不能写 text-decoration-thickness: 2px; border-bottom: 2px solid currentColor; 并指望前者失败时后者接管，因为两者互不干扰，border-bottom 会无条件叠加。
- Firefox 69–70：属性名可识别，但值被丢弃，下划线仍是默认粗细
- Safari 12.0：CSS 解析器报 warning（devtools 控制台可见
Invalid property name 'text-decoration-thickness'） - IE 全系：直接跳过整条声明，连 warning 都没有
- Chrome 88 及更早：部分安卓 WebView 中存在
auto值误判为0的问题
用 border-bottom 替代时必须处理的三个错位问题
直接给 加 border-bottom 看似简单，但多行文本、descender 字母（g/j/p/q/y）、行高变化时会立刻暴露定位缺陷：
- 默认
border-bottom贴在 inline 元素的 content box 底边，而 descender 区域向下延伸，导致线条“压字”或视觉上被截断 - 换行时，
border-bottom只出现在最后一行末尾，不是每行都有一条线 - inline 元素加
border-bottom后，若未设display: inline-block，边框会撑满整行宽度，超出文字范围
正确做法是改用 ::after 伪元素 + 绝对定位：
.underline {
position: relative;
line-height: 1.4;
}
.underline::after {
content: '';
position: absolute;
bottom: 0.2em;
left: 0;
width: 100%;
height: 1.5px;
background-color: currentColor;
}
其中 bottom: 0.2em 是关键偏移量，用来避开 descender；line-height: 1.4 是硬性前提，否则 em 单位在绝对定位中会失准。
何时该坚持用 text-decoration-thickness，而非立刻降级
如果你的目标环境明确可控（例如仅面向 Chrome 95+ / Safari 15.4+ / Firefox 102+ 的内部管理后台），text-decoration-thickness 仍有不可替代的优势：
- 自动继承
currentColor，无需额外声明颜色 - 天然支持
text-underline-offset精确控距，且两者联动稳定（border-bottom需靠padding-bottom或transform模拟，易与行高冲突） - 能和
text-decoration-style: wavy或dotted组合使用，伪元素方案需额外绘制 SVG 或渐变背景 - 响应式缩放友好：
text-decoration-thickness: 0.08em随字体大小等比变化，border-bottom-width: 1px则始终固定
但注意：text-decoration-thickness: from-font 在 macOS 上依赖系统字体度量，不同字体返回值差异大，实测 Roboto 和 Noto Sans 中文返回的 thickness 可差 0.3px，慎用。
最稳妥的渐进增强写法
不要试图用 @supports 包裹整个下划线逻辑，而应把现代属性作为“增强层”叠在降级方案之上：
a {
text-decoration: none;
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: 0.2em;
left: 0;
width: 100%;
height: 1.5px;
background-color: currentColor;
}
@supports (text-decoration-thickness: 1px) {
a {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.2em;
}
a::after {
display: none;
}
}
这里的关键是：降级方案（伪元素）默认启用，现代方案仅在真正支持且能渲染时才覆盖并隐藏它。很多团队漏掉 a::after { display: none }，结果在 Safari 15.4+ 里看到两条线叠在一起 —— 这是最常被忽略的兼容细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
