关于手机网站(webApp)点击链接出现蓝色焦点框的问题

随着智能的飞速的普及,手机网站也是越来越多。

在使用在浏览手机网站时候,点击链接时候出现一个蓝色的框,非常多影响视角效果,俺就是饱受折磨,又说服不了设计师,几经周折。查阅一些资料,总算把原因给找到了。现在分享出来与大家共享

出现以上问题的不再PC端点击链接的虚线框在作祟了,而一个比较偏门的CSS3属性 -webkit-tap-highlight-color 在捣蛋作祟。

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。

目前此属性支持 IOS系统iphone与ipad,其他系统暂时不支持。在webkit核心的浏览器下来又表现出来了,经过我的测试,在android系统,颜色值不生效,无法运用起来,默认的效果又太撮了。故而只能忍痛暂时将其废弃掉,禁用这个高亮的方式。

在样式表中写一条 body{-webkit-tap-highlight-color:rgba(0,0,0,0)}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值