因为默认不可点击，webkit内核不为其绘制tap高亮层，-webkit-tap-highlight-color: transparent选择器不匹配而被忽略；需作用于具备可交互语义的父容器（如或带role="button"的元素），并确保正确取值与真机验证。
为什么给 <img> 加 -webkit-tap-highlight-color: transparent 没用
因为 <img> 默认不是可点击元素，WebKit 内核（iOS Safari、微信 X5）根本不会为它绘制 tap 高亮层。你看到的“高亮”，其实是父容器（比如 @#@#@#@#@#@#@#@#@#@0 → 给 a 加规则：a { -webkit-tap-highlight-color: transparent; }
<div onclick="handleClick()"><img onclick="doSomething()"></div> → 必须加 role="button" 和 tabindex="0"，再选中：[role="button"][tabindex="0"] { -webkit-tap-highlight-color: transparent; }
v-on:click 或 onClick 绑定的图片包装元素 → 确保该元素有 role="button"，且 CSS 选择器能命中（避免用 ::v-deep 外部穿透失效）
-webkit-tap-highlight-color 的值和写法陷阱
只认两个值：严格意义上的完全透明。其他写法全部白写。
- ✅ 正确：
-webkit-tap-highlight-color: transparent;（最稳，兼容 iOS 10+ 和微信 X5） - ✅ 可选：
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);（部分旧 UC 浏览器要求这样写） - ❌ 无效：
rgba(255,255,255,0)、none、initial、inherit、color: transparent - ❌ 危险：
* { -webkit-tap-highlight-color: transparent; }—— 微信 X5 可能白屏或卡顿；body上设也无效
关掉高亮后，用户点图没反馈怎么办
禁用系统高亮 ≠ 可以不提供任何视觉响应。尤其图片常作为按钮使用（如轮播箭头、图标操作区），必须手动补反馈：
- 对
a或带role="button"的容器加:active样式，例如：a:active { opacity: 0.8; }或[role="button"]:active { transform: scale(0.98); } - 确保最小点击区域 ≥ 44×44px，避免误触——纯
img尺寸太小，必须靠父容器撑开 - 若图片是功能入口（如“收藏”图标），建议加
aria-label，并保留键盘焦点样式（:focus { outline: 2px solid #007aff; }），否则屏幕阅读器用户会丢失上下文
真正容易被忽略的是：这个属性只在真实触摸设备上生效，Chrome 模拟器默认关闭它。不拿 iPhone 或安卓真机点一下，永远不知道有没有漏掉某个动态插入的按钮或某版微信 X5 的兼容异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
