请问在移动端点击嵌套有img标签的a标签时,怎样才不会触发它的默认样式?

这是我的html结构:

<a href=""><img src="img/icon_shop.jpg"/></a>

当我在点击a标签的同时,会在该元素上显示出一个遮罩层,在PC端和移动端的遮罩层不一样

clipboard.png

在chrome模拟器中会出现以上的灰色层,在手机上会显示为蓝色,很影响体验,请问该怎样解决?

阅读 3.6k
2 个回答

以下是我的reset.css,你的问题看最后一条;

:root *,body *{
    -webkit-touch-callout: none;//长按菜单
    -webkit-text-size-adjust:none;//停用字体优化
    -webkit-appearance: none;//form控件重置样式
    -webkit-tap-highlight-color: transparent;//点击高光
    -webkit-user-drag: none;//停用拖动
    -webkit-user-select : none;//停用用户选择
}
a,button,input,optgroup,select,textarea, div {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
推荐问题
宣传栏