如上图所示，手机/移动端点击 a 链接会有一个背景，尝试设置 background: none 无效。
解决方法：
给元素设置一个 -webkit-tap-highlight-color 就可以了：
a:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}
如果无效，多设置几个：
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% 透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad)。
原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/231341.html