解决IOS点击链接触发的颜色块

前言

   在做手机页面的时候碰到了这样一个问题：手指点击某一个链接的时候触发了一个半透明的颜色块。类似如图

   但是淘宝和京东的手机端没有类似出现这样的情况，所以应该是有这么一个禁止触发的属性，因为在 a 链接触发的所以，所以审查元素找到 a 链接的状态，但是发现他们的 a 链接是没有设置任何的，但是在根属性发现这么一个属性-webkit-tap-highlight-color:rgba(0,0,0,0) 于是百度了一下，于是找到了愚人码头关于webkit私有属性的一些知识，原来确实是有可以覆盖这个行为的属性。

基础知识

   官方解释如下：

   描述：假如指定，那么这个值遵循Alpha值，假如不指定，那么调用默认的Alpha值，假如设置alpha的值为0，点击元素禁用高亮，假如设置alpha为1，那么点击元素的时候将会不可见。

   支持系统： iOS 1.1.1 以上

   支持等级： Apple extension—Safari on iOS only【仅仅针对IOS中的Safari】这点跟愚人码头小出入，不过我用模拟器测试安卓系统的确实也是可以，只不过没有顺畅欢迎反馈Android客户端的点击效果，希望可以更新^_^

   说明：刚刚也提到了color是需要用css3的color，也就是RGBa颜色值，具体请前往MDN，rgba(x,x,x,x) 前面三个值分别代表RGB，后面一个值代表alpha，数值从0~1浮动，0为全透明，1为不透明。

   测试demo：

.none{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.have{
	-webkit-tap-highlight-color:rgba(255,0,0,1);
}

   HTML：

<a href="javascript:">a链接</a>
<a href="#" class="none">a链接</a>
<a href="#" class="have">a链接</a>

   不妨拿出你的手机出来扫一扫下面的：

后话

   做苹果 webapp 的同学不妨可以研究下 IOS 的 web 开发文档，专门是针对 IOS 的 Safari，目测对你应该会很有帮助哦，起码知道坑在哪里，该怎么填。哦，对了你不需要慢慢去找了，我下载一份PDF 格式链接地址：

   SafariCSSRef-苹果web开发文档【右键另存为】

参考资料：

     apple-for-webkit-tap-highlight-color

本文地址：http://xiaoho.com/?p=919