关于手机网站(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)}

展开阅读全文

没有更多推荐了,返回首页