text-decoration-skip-ink写了没反应最常见原因是未声明text-decoration:underline，该属性仅在下划线或上划线存在时生效；其他原因包括使用已废弃的text-decoration-skip:ink、字体无opentype轮廓、父级设了text-decoration:none，或误用于line-through。
text-decoration-skip-ink 为什么写了没反应
最常见原因是它根本没机会生效——text-decoration-skip-ink 只在 text-decoration: underline（或 overline）存在时才起作用。光写 text-decoration-skip-ink: auto 而漏掉下划线声明，等于给一把锁配了钥匙却没门。
其他高频失效场景：
- 用了已废弃的旧写法
text-decoration-skip: ink，浏览器直接忽略 - 字体本身缺乏 OpenType 轮廓数据（比如某些图标字体、手写体），浏览器无法识别下降部边界
- 父级设置了
text-decoration: none，子元素再设skip-ink也无从渲染 - 在
line-through上误用——该属性对删除线无效
auto 和 none 的实际区别在哪
text-decoration-skip-ink: auto 是默认值，浏览器会尝试避开字母 g、j、y、p 的墨迹区域；text-decoration-skip-ink: none 则强制下划线连续穿过所有字符底部，哪怕切穿下降笔画。
关键点：
- 两者都只影响
underline和overline，和line-through无关 -
auto表现依赖字体渲染能力：系统字体（如 Inter、Segoe UI）效果明显，但某些 Web 字体可能跳过不完整 -
none不是“bug”，适合需要强调断裂感的设计，或调试时对比 baseline 位置
必须搭配的其他 text-decoration 属性
单靠 skip-ink 很难达到理想效果，它需要空间和视觉支撑：
-
text-underline-offset：给跳过留出物理余量，建议设为4px或0.2em，尤其在字号 ≥18px 时；Chrome 87+ / Firefox 89+ 支持 -
text-decoration-thickness：避免细线在跳过区域显得断续，设为2px或from-font -
text-decoration-color：确保颜色与文字足够区分，深背景上别用默认继承色
推荐组合写法：
span.underline {<br> text-decoration: underline;<br> text-decoration-color: #007bff;<br> text-decoration-thickness: 2px;<br> text-underline-offset: 4px;<br> text-decoration-skip-ink: auto;<br>}
真正容易被忽略的兼容性细节
这个属性不是“开了就稳”——同一段 CSS 在不同字体、不同字号下表现可能不一致。比如 16px 的 Inter 字体能准确跳过 g 的下降部，换成 24px 的某款自定义字体，可能只跳一半或完全不跳。
上线前务必实测：
- 目标字体 + 典型字号（尤其是 14–20px 区间）
- 重点检查 g、j、y、p 四个字母是否被正确避开
- 旧 Safari（
跳过行为本质上是浏览器对字体轮廓路径的解析结果，不是纯 CSS 渲染逻辑——这意味着它既不可预测，也不可强制修正，只能靠实测兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
