必须直接在可激活元素（如a、button、[role="button"]）上声明-webkit-tap-highlight-color: transparent，该属性不继承，且需配合完整viewport meta（含user-scalable=no）才能在ios safari和微信x5内核生效。
为什么只写 -webkit-tap-highlight-color: transparent 还是无效
不是样式写错了，而是它根本没作用到目标元素上。这个属性不继承，body 或 * {} 里声明基本等于白写——尤其在微信 X5 内核、iOS Safari 中，父级设置完全不影响子元素。必须直接加在可激活元素自身上，比如 a、button、input[type="button"]，或者明确标注了 role="button" 或 tabindex="0" 的 div。
常见失效场景：
-
div绑了onclick却没加role="button"—— Safari 不认它是可点击元素，高亮压根不触发，自然也关不掉 - 用 Vue/React 动态渲染按钮，class 没同步过去，或
role属性被条件逻辑漏掉 - 写了
a:active { -webkit-tap-highlight-color: transparent; }—— 伪类里声明无效，必须是常态样式
哪些元素必须显式设置 -webkit-tap-highlight-color
只对“可聚焦/可激活”元素生效，不是所有带交互行为的标签都自动中招。Safari 默认只给语义化交互元素加高亮，比如：
-
a、button、input[type="button"]、input[type="submit"] - 带
role="button"或tabindex="0"的div、span等非语义容器 - 含
onclick属性的元素，但前提是它已被浏览器识别为可交互（否则需补role或tabindex）
推荐选择器组合：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}
meta 标签和 -webkit-tap-highlight-color 有什么关系
单独写 meta 标签不能控制点击高亮，但它会影响某些 WebView 对该样式的解析能力。微信 X5 内核（QQ 浏览器同源）有个隐藏规则：如果页面缺少完整 <meta name="viewport">，或 content 中不含 user-scalable=no，它可能直接忽略 -webkit-tap-highlight-color 声明。
所以必须配齐 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：user-scalable=no 在这里不是为了禁缩放，而是为了让 X5 内核启用 tap-highlight-color 支持——这是实际真机测试验证过的依赖项。
为什么 iOS 15.4+ 上还有微弱闪烁
设了 -webkit-tap-highlight-color: transparent 后仍见灰白残影，不是样式失效，而是系统默认的文本可选行为触发了重绘。这时候单靠 CSS 不够，得配合 user-select: none 才算真正干净。
但要注意平衡：
- 整块区域加
user-select: none会阻止用户复制电话、地址等关键信息 - 更稳妥的做法是包裹可选内容，比如：
<span class="selectable">138-0013-8000</span>，再单独给该span设user-select: text -
-webkit-tap-highlight-color: transparent+user-select: none是目前 iOS 上最可靠的组合
Android Chrome 62+ 已彻底忽略这个属性，别指望它跨平台生效；真机测试前，务必在 iOS Safari 和微信环境里点几下确认效果，模拟器看不到真实表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
