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