关闭移动端点击高亮应优先使用 -webkit-tap-highlight-color: transparent，但该属性仅在 iOS Safari 和部分旧版 Android 浏览器生效；Android Chrome 62+ 已完全忽略，且其为 WebKit 私有属性，无标准支持，需配合 role="button" 或 tabindex="0" 才能在 Safari 对非语义元素生效，微信 X5 内核还要求 viewport 中包含 user-scalable=no 才启用该样式，更可靠方案是用 :active 伪类主动控制点击反馈并确保可访问性。
移动端点击高亮怎么关掉
直接设 tap-highlight-color: transparent 就行，但只对 iOS Safari 和部分旧版 Android 浏览器有效。Android Chrome 从 62 版本起已完全忽略这个属性，所以别指望它在所有设备上都起作用。
tap-highlight-color 的兼容性坑在哪
这个 CSS 属性本质是 WebKit 私有扩展，标准里根本没它。iOS Safari（包括微信内置浏览器）认，但 Android Chrome、Firefox、Edge 都不支持。更麻烦的是：即使在 Safari 上生效，也只影响原生可点击元素（比如 <a>、<button>），对加了 onclick 或 addEventListener('click') 的 <div> 默认无效 —— 因为它不是“可聚焦可激活”的语义化元素。
- 必须确保元素有
role="button"或tabindex="0"，否则 Safari 根本不触发高亮，也就谈不上“关” - 如果用了
user-select: none，有时会连带抑制高亮，但这不是可靠方案，且影响长按复制等行为 - 真要兼容 Android Chrome，得靠
-webkit-tap-highlight-color: transparent+ JavaScript 拦截touchstart并preventDefault()（但会破坏滚动，慎用）
更靠谱的替代方案：用 outline 和 :active 控制视觉反馈
与其死磕 tap-highlight-color，不如主动接管点击态样式。iOS 和 Android 都支持 :active 伪类（需注意：页面要有 viewport meta，且元素是可点击语义元素或有 cursor: pointer）。
- 给按钮类元素加
outline: none防止键盘焦点高亮干扰 - 用
&:active { opacity: 0.7; }或背景色微调做点击反馈，比默认高亮更可控 - 如果用 React/Vue，避免在
div上绑@click后忘记加role="button"和tabindex="0"，否则既没高亮也没无障碍支持
微信 WebView 里特别要注意什么
微信内置浏览器基于 X5 内核（QQ 浏览器同源），它部分支持 -webkit-tap-highlight-color，但有个隐藏规则：如果页面没有设置 <meta name="viewport" content="...">，或者 content 里含 user-scalable=no，X5 内核可能直接禁用该样式。所以：
立即学习“前端免费学习笔记（深入）”；
- 必须写完整的 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 哪怕你不需要禁止缩放，也别删
user-scalable=no—— X5 内核就认这个开关来启用 tap 高亮控制 - 实测中，
-webkit-tap-highlight-color: rgba(0,0,0,0)比transparent更稳，某些旧版 X5 对后者解析异常
tap-highlight-color 只是表层控制，真正难的是统一各端点击反馈逻辑和可访问性保障。别只盯着透明不透明，先确认元素是否被浏览器识别为“可点击目标”。 
