如上图所示，手机/移动端点击 a 链接会有一个背景，尝试设置 background: none 无效。
解决方法：
给元素设置一个 -webkit-tap-highlight-color 就可以了：
a:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}如果无效，多设置几个：
代码语言：javascript复制a, a:hover, a:visited, a:link, a:active , a:focus {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}-webkit-tap-highlight-color：
这是一个鲜为人知的属性，只用于iOS (iPhone和iPad)。
当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置 -webkit-tap-highlight-color 为任何颜色。
想要禁用这个高亮，设置颜色的 alpha 值为 0 即可。
示例：设置高亮色为 50% 透明的红色:
代码语言：javascript复制-webkit-tap-highlight-color: rgba(255,0,0,0.5);浏览器支持: 只有iOS(iPhone和iPad)。
声明：本文由w3h5原创，转载请注明出处：《手机端a标签点击出现背景的解决方法》 https://cloud.tencent.com/developer/article/1537962
代码语言：txt复制 (adsbygoogle = window.adsbygoogle || []).push({});
