safari 15.4+中text-decoration-thickness不生效，主因是仅支持具体数值（如0.08em）、忽略auto/from-font，且严格禁止与text-decoration简写混用；必须成套声明text-decoration-line、-color、-style，并避免任何level 3简写干扰。
text-decoration-thickness 在 Safari 15.4+ 为什么还是不生效
不是“不支持”，而是 Safari 对 text-decoration-thickness 的实现有保留：它只接受具体数值（如 1.2px、0.08em），对 auto 和 from-font 基本忽略；更关键的是，若同时声明了 text-decoration 简写（比如 text-decoration: underline red），Safari 会直接丢弃后续的 text-decoration-thickness —— 这比 Chrome 更严格。
常见错误现象：
– 写了 text-decoration-line: underline + text-decoration-thickness: 2px，但下划线没变粗
– 在 Safari 开发者工具里看到 computed styles 中 text-decoration-thickness 显示为 unset
– 同一段 CSS 在 Chrome 正常，在 Safari 完全失效
根本原因：Safari 要求 Level 4 属性必须“成套出现”，且不能与 Level 3 简写混用。哪怕只漏一个 text-decoration-color，也可能触发降级逻辑。
用 border-bottom 模拟下划线时怎么避免换行错位
伪元素或 border-bottom 是最稳妥的降级方案，但容易在多行文本中出问题：默认 border-bottom 画在行框底部，而文字 descender（如 g/y/q 的下伸部分）会被压住，视觉上像被截断；更麻烦的是，当文本折行时，border 只出现在最后一行尾部，而非每行都加。
实操建议：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 不用
border-bottom直接挂元素上，改用::after伪元素 +position: absolute - 伪元素宽高设为
width: 100%+height: 1.5px（匹配你想要的粗细），再用bottom: 0.2em往下微调，避开 descender - 父容器需设
position: relative，且line-height保持合理（建议 ≥ 1.4），否则绝对定位会失准 - 若内容可能换行，加
white-space: pre-wrap并确保伪元素content: ""不破坏盒模型
如何让 border 模拟的下划线随 font-size 缩放
固定像素值（如 height: 2px）在响应式场景下会失配：小字号时显得太粗，大字号时又太细。但直接用 em 或 rem 也不可靠——因为 border 不继承 line-height，1em 是基于父元素字体大小，而非当前行内文本。
推荐做法：
- 用
height: 0.08em（相对当前元素font-size），这是目前最接近原生text-decoration-thickness行为的单位 - 配合
transform: translateY(0.2em)替代bottom，避免受line-height干扰 - 如果需要适配不同粗细等级（比如标题 vs 正文），可定义 CSS 自定义属性：
--underline-thickness: 0.08em，然后在伪元素中引用height: var(--underline-thickness)
Safari 下 text-underline-offset 不起作用怎么办
Safari 对 text-underline-offset 支持极弱（截至 Safari 17.5），即使写了 text-underline-offset: 2px，computed styles 也常显示为 auto，且实际位置几乎不变。这不是 bug，是 Apple 尚未完成该属性的渲染通路。
此时唯一可靠路径是放弃原生 offset，改用模拟方案中的位移控制：
- 伪元素用
transform: translateY(0.25em)手动下推，数值按字号比例试出来（例如font-size: 16px→ 推4px≈0.25em） - 避免用负值，否则在 Safari 中易导致伪元素脱离行框、触发重绘异常
- 如果项目已用 PostCSS，可用
postcss-text-decoration插件自动为 Safari 注入 border fallback，但需注意它不处理多行文本的自动延展
真正棘手的点不在写法，而在验证：Safari 的开发者工具里看不出伪元素是否精准贴合 descender 底部，得靠真机截图比对 g/y/q 字母的下伸部分是否被遮挡——这个细节，多数人上线前根本没测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
