移动端点击高亮是iOS Safari等WebKit内核浏览器点击可交互元素时显示的半透明灰色背景，用于视觉反馈；需用-webkit-tap-highlight-color: transparent显式禁用，仅作用于具体元素且不可继承。
移动端点击高亮是什么，为什么需要关掉
iOS Safari 和部分 Android 浏览器在用户点击可交互元素（如 <a></a>、<button></button>）时，会默认显示一个半透明灰色背景（即“tap highlight”），用于视觉反馈。这个效果由 tap-highlight-color 控制，但它常与设计冲突：遮挡文字、破坏圆角、干扰过渡动画，甚至导致误判“点击没生效”。它不是伪类，也不是 CSS 可继承属性，必须显式设置才能禁用。
怎么正确设置 tap-highlight-color
该属性只在 iOS Safari（含微信内置浏览器、QQ 浏览器等 WebKit 内核环境）中生效；Chrome for Android、Firefox Mobile 等不支持。关键点是：必须作用于具体可点击元素，不能只写在 body 或 * 上，且需配合 -webkit-tap-highlight-color 前缀。
推荐写法：
a, button, input[type="button"], input[type="submit"], label {
-webkit-tap-highlight-color: transparent;
}注意：transparent 是最稳妥的值；用 rgba(0,0,0,0) 也行，但部分旧版 iOS 有渲染异常；绝对不要设为 none（无效）或空字符串（被忽略）。
立即学习“前端免费学习笔记（深入）”；
为什么加了还不生效？常见踩坑点
以下情况会导致设置失效：
-
pointer-events: none的元素无法触发 tap highlight，自然也无需设置 —— 别白费劲 - 父容器设置了
-webkit-tap-highlight-color，但子元素自己又重写了（比如按钮用了background覆盖），高亮可能仍可见 —— 检查层级和样式优先级 - 在
touchstart中调用了event.preventDefault()，会同时阻止高亮和默认行为，但可能引发滚动失效 —— 尽量避免无差别 prevent - 使用了
user-select: none但没配-webkit-tap-highlight-color，高亮照常出现 —— 两者无关，不能互相替代
要不要全局禁用？考虑兼容性和可访问性
全站统一设为 transparent 看似省事，但存在隐患：
• 部分老年用户或低视力用户依赖这个高亮确认操作目标，突然消失可能降低可感知性
• 如果你的按钮本身没有其他点击反馈（如 :active 样式、缩放、阴影变化），禁用后会显得“点不动”
• 微信内嵌 WebView 对 -webkit-tap-highlight-color 支持不稳定，某些版本下即使写了也不生效 —— 建议搭配轻量 :active 规则兜底
更稳妥的做法是：仅对明确不需要高亮的组件（如轮播图箭头、自定义开关、图标按钮）单独设置，同时确保它们有其他视觉反馈机制。
复杂点在于，这个属性既不是标准 CSS，也不能被 JavaScript 动态读取（getComputedStyle 返回空字符串），调试只能靠真机连 Safari Web Inspector 实时观察。别信模拟器。
