解决IOS点击链接触发的颜色块
前言
在做手机页面的时候碰到了这样一个问题:手指点击某一个链接的时候触发了一个半透明的颜色块。类似如图
但是淘宝和京东的手机端没有类似出现这样的情况,所以应该是有这么一个禁止触发的属性,因为在 a 链接触发的所以,所以审查元素找到 a 链接的状态,但是发现他们的 a 链接是没有设置任何的,但是在根属性发现这么一个属性-webkit-tap-highlight-color:rgba(0,0,0,0) 于是百度了一下,于是找到了愚人码头关于webkit私有属性的一些知识,原来确实是有可以覆盖这个行为的属性。
基础知识
属性名: | -webkit-tap-highlight-color |
---|---|
属性值: | color color是指css3带Alpha的color |
初始值: | inherit |
应用于: | a链接的标签,或者带有javascript可点击的元素 |
官方解释如下:
描述:假如指定,那么这个值遵循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
建议继续学习:
- 如何获取用户访问过哪些网站 (阅读:2834)
- unix文件系统:链接与文件 (阅读:2766)
- 优雅地扩大链接响应区域 (阅读:2520)
- Linux程序链接时-lpthread对程序正确性的影响 (阅读:2455)
- html中链接地址的重要性 (阅读:2411)
- 链轮策略:LinkWheel (阅读:1775)
- 最应该规范设计的元素――链接 (阅读:1671)
- 浅议Wap网页设计中的锚点链接 (阅读:1594)
- Windows硬链接 软链接 符号链接 快捷方式 (阅读:927)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:suchanghai 来源: 小黑路人-苏昌海-xiaoho.com-分享html/css/web前端知识
- 标签: 链接 颜色块
- 发布时间:2015-01-17 00:07:51
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则