text-decoration不生效最常见的原因是其不具继承性但“取消装饰”行为会被继承，父元素设none会压制子元素的underline声明，且color、style、容器布局等均可能导致视觉不可见或渲染异常。
text-decoration 样式被父元素或子元素覆盖
最常见的原因是 text-decoration 不具有继承性，但它的「取消装饰」行为会被子元素继承（比如子元素设了 text-decoration: none，就会让整段文字都不显示下划线）。更隐蔽的是，父元素设置了 text-decoration: none，而你只在子元素上写 text-decoration: underline —— 这不会生效，因为父级的 none 会压制子级的显式声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查实际生效的
text-decoration值，注意看是来自哪一层级 - 避免依赖「子元素覆盖父元素」来加装饰线；改用直接作用于目标文本元素，或用
text-decoration-line: underline显式声明 - 若父元素必须无装饰，子元素又需下划线，可对子元素单独设置：
span.underline { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-style: solid; }
text-decoration-color 或 text-decoration-style 导致视觉不可见
即使写了 text-decoration: underline，如果颜色和背景一致（比如 text-decoration-color: white 在白色背景上），或样式是 dotted/dashed 且粗细太细（text-decoration-thickness: 0.5px），人眼可能完全看不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
text-decoration-color为对比色，例如：text-decoration-color: #007bff - 避免用极小的
text-decoration-thickness值；默认值通常更可靠，或设为1px或2px - 慎用
text-decoration-style: wavy：部分旧版 Safari 和某些 Android WebView 渲染异常，优先用solid
行内元素包裹导致装饰线中断或错位
当文本中混有 、 等行内标签，且这些标签本身也设置了 text-decoration（哪怕只是 none），就可能造成装饰线在标签边界处断开、偏移甚至消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一将装饰线应用在最外层容器（如
或），内部子元素不设任何text-decoration - 若必须保留语义标签，可给它们加
text-decoration: inherit，确保延续父级装饰 - 遇到装饰线位置明显偏高/偏低，检查是否启用了
text-underline-offset，它会整体移动线的位置，设为0或auto更稳妥
Flex/Grid 容器中 text-decoration 失效
当文本位于 display: flex 或 display: grid 的容器中，且该容器设置了 align-items: center 或类似属性时，部分浏览器（尤其是旧版 Chrome）会错误地忽略子元素的 text-decoration 渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要把
text-decoration依赖放在 Flex/Grid 子项上；改用伪元素模拟下划线：a { position: relative; } a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; } - 或者临时关闭父容器的
align-items，改用margin或padding控制垂直居中 - 注意：伪元素方案无法自动响应文字长度变化（如换行），长文本需配合
white-space: nowrap或 JS 动态计算
真正难排查的，往往是多个条件叠加：父元素设了 none、子元素用了 wavy、又在 Flex 容器里、还配了极细的 thickness。这种时候别猜，打开 DevTools，逐层关掉样式，看哪一行一关就出来了。
