Text-decoration: underline样式在真实移动端设备不生效问题咨询

问题根因 #

你使用的text-decoration多值简写语法在部分移动端Chromium内核浏览器（移动端Chrome、Edge均属于该范畴）上存在兼容缺陷，导致多值合并的简写样式无法被正确识别，因此下划线不会渲染。桌面端和开发者工具模拟模式因为使用的是桌面端内核，对新语法支持更完善，所以表现正常。

修复方案 #

将简写的text-decoration属性拆分为独立的单属性声明即可兼容绝大多数移动端浏览器：

/* 原代码 */
.articlechild h2 {
  margin: 10px 0px;
  font-size: 30px;
  text-decoration: wavy #25fde9 underline;
}

/* 修改后代码 */
.articlechild h2 {
  margin: 10px 0;
  font-size: 30px;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #25fde9;
}

其他可选排查点 #

• 确认移动端浏览器未开启省流量/极简浏览模式，这类模式会主动禁用非必要的装饰性样式降低资源消耗
• 检查是否存在更高优先级的CSS规则重新覆盖了标题元素的text-decoration属性
• 如果你使用了CSS预处理器，确认编译后的最终代码没有把拆分属性重新合并为不兼容的简写形式

内容的提问来源于stack exchange，提问作者Filipe Pestana