ios safari 中 tap-highlight-color 无效，必须使用 -webkit-tap-highlight-color: transparent 才能禁用点击高亮，且仅对 ios 和部分 webkit 内核浏览器生效。
tap-highlight-color 在 iOS Safari 中根本不起作用
这个属性早在 iOS 8 就被移除了，现在写 tap-highlight-color: transparent 或任何值都完全无效。很多老教程还在提它，但实际调试时你会发现点击区域依然有灰色或蓝色高亮——不是你没写对，是浏览器压根不认。
真正有效的方案是 -webkit-tap-highlight-color
必须加 -webkit- 前缀，且只在 iOS 和部分 Android WebKit 内核浏览器中生效（如微信内置浏览器、QQ 浏览器）。Android Chrome 自 59+ 已弃用该属性，但 iOS Safari 至今仍依赖它。
实操建议：
- 全局禁用：在
body或*:not(input):not(textarea)上设置-webkit-tap-highlight-color: transparent - 避免滥用：不要给
input、textarea、select设置，否则会影响可访问性，用户无法感知焦点位置 - 透明值必须写
transparent，不能写rgba(0,0,0,0)或none，后者会被忽略
为什么加了前缀还是有高亮？检查这些点
常见失效原因不是语法错，而是环境或层级干扰：
- 父容器设置了
pointer-events: none，导致事件未触发 tap 行为，高亮逻辑不进入流程 - 元素绑定了
touchstart且调用了event.preventDefault()，可能中断默认高亮时机（尤其在 fastclick 类库存在时） - CSS 选择器优先级不足，被其他规则覆盖（比如第三方 UI 库重置了该属性）
- 使用了
user-select: none但没配-webkit-user-select: none，某些旧版 iOS 会回退到默认高亮策略
现代替代思路：用 focus-visible + outline 控制焦点样式
随着 :focus-visible 成为标准，更健壮的做法是放弃“彻底消灭高亮”，转而统一管理焦点反馈：
- 移除所有
-webkit-tap-highlight-color，改用outline: none配合:focus-visible自定义轮廓 - 对触控设备，可通过
@media (hover: none) and (pointer: coarse)单独处理点击反馈，比如加轻微背景色变化 - 保留键盘焦点的 outline，确保无障碍可用——这才是真正影响用户的点，而不是那个一闪而过的高亮
高亮本身不是 bug，是系统级反馈机制；强行抹掉容易让视障用户或键盘导航者失去操作线索。真正该控制的，是反馈的形式，不是是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
