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

行内元素包裹导致装饰线中断或错位

当文本中混有 <strong>、<em> 等行内标签，且这些标签本身也设置了 text-decoration（哪怕只是 none），就可能造成装饰线在标签边界处断开、偏移甚至消失。

Android Remote Control

远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……

下载

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 统一将装饰线应用在最外层容器（如 <p> 或 <span class="decorated">），内部子元素不设任何 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，逐层关掉样式，看哪一行一关就出来了。