tap-highlight-color 仅在 iOS Safari 及微信内置浏览器中对 和可聚焦元素生效，需加 -webkit- 前缀、设为 transparent，且不能写在伪类中；Android 浏览器完全忽略，跨平台应禁用系统高亮并自定义触摸态。
tap-highlight-color 在 iOS Safari 上根本不起作用？
不是你写错了，是它只对 <a></a> 和可聚焦元素（如带 tabindex 的 <div>）生效，且仅在 iOS Safari（含微信内置浏览器）中有效。Android Chrome、Firefox、新版 Edge 完全忽略该属性。<ul>
<li>必须给元素加 <code>cursor: pointer 或确保它原生可点击（比如 <a href="#"></a>），否则即使写了 tap-highlight-color: transparent 也无效
:active），必须直接作用于元素本身transparent 最可靠；rgba(0,0,0,0) 在某些旧版 iOS 上会回退为灰色高亮为什么用了 tap-highlight-color 还有灰色遮罩？
大概率是没关掉默认的「点击反馈」行为——iOS 会叠加两层：系统级半透明高亮（tap-highlight-color 控制） + 元素自身的 :active 样式（比如背景变深）。两者独立触发，容易混淆。
- 先确认是否真由
tap-highlight-color引起：临时加tap-highlight-color: red，点一下看是不是红色块；如果不是，说明是:active或其他 CSS 动画在起作用 - 同时清理
:active样式：a:active { background: none; }，避免视觉叠加 - 如果用的是框架组件（如 Vue 的
v-touch、React 的onTouchStart），它们可能自己模拟了反馈，此时tap-highlight-color已被绕过
替代方案：当 tap-highlight-color 失效或需要跨平台统一时
真正可控、全平台兼容的做法，是主动禁用系统高亮 + 自定义触摸态，而不是依赖这个半废弃的私有属性。
- 全局禁用（推荐）：
* { -webkit-tap-highlight-color: transparent; }—— 注意加-webkit-前缀，不加等于白写 - 配合
touch-action: manipulation提升响应速度，尤其对按钮类元素，能减少 300ms 延迟 - 自定义点击态更稳妥：用
ontouchstart+ontouchend切换 class，或监听pointerdown/pointerup（现代方案）
例如：
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }<br>button:active { opacity: 0.7; }
立即学习“前端免费学习笔记（深入）”；
移动端点击区域小、误触多，光靠 tap-highlight-color 解决不了
这个属性只控制那个一闪而过的色块，和点击是否精准、是否触发、是否有延迟完全无关。很多人以为设了它就“优化了点击”，其实只是掩盖了更底层的问题。
- 最小点击区域应 ≥ 44×44px（iOS 人机界面指南），
padding比font-size更可靠 - 避免在
click事件上做重操作；优先用pointerdown响应，再结合preventDefault()阻止滚屏干扰 - 真要调试点击问题，打开 Safari 开发者工具 → “Elements” 面板 → 点击元素右上角的“:hov”按钮，手动触发
:active看样式是否生效
别在 tap-highlight-color 上花太多时间——它只是个补丁，不是解药。真正影响体验的，是点击区域、事件绑定时机、以及有没有意外阻止了原生行为。
