【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框
2013-02-28 12:29
288 查看
去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结。
在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景;对于android则出现红色的边框。对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......
主要是在android手机的一个bug
使用css给模块设置了opacity:0,控制该模块隐藏,如果该模块包含a标签,其a标签在android手机是可以被触发的,而在iphone是不可以触发。
下图左图为模块一,当页面内容未加载完成时,显示该模块;右图为模块二,当页面内容完全加载成功后才显示该模块,模块二通过设置了完全透明使其隐藏在模块一的上一层级。
![](http://images.cnitblog.com/blog/278431/201302/28121019-bd32352d792e41ea9b69dd9165748666.jpg)
在android手机中,当处于模块一状态时,用户触摸到“查看按钮”,a标签的边框显示出来,这明显不是我们要想要的体验。
![](http://images.cnitblog.com/blog/278431/201302/19212951-6468b845c9e742daa1ef1dc02702f26b.jpg)
最后跟产品经理沟通后,针对android手机去除上图的按钮边框,那么如何去除android手机自带的按钮边框呢?
在搜索引擎中找到资料-webkit-tap-highlight-color可以去除边框,如下图:
![](http://images.cnitblog.com/blog/278431/201302/28122717-e4b8828ab30b45d8aa4a7a199cbcf6c1.jpg)
排除误解
网络资料说这个属性只用于iOS(iPhone和iPad),其实是错误的,android手机大部分也是支持的,只是显示效果不一样,移动开发并不成熟,更多的还需要大家去实践来辨别真伪- -
-webkit-tap-highlight-color用法
webkit内核的浏览器,当用户点击一个链接或者通过js定义的可点击元素的时候,会出现一个半透明的灰色背景或者红色的边框。
如果想要禁用高亮,可设置颜色的alpha值为0,也就是属性值的最后一位设置为0就可以去除背景或者边框。
去除android链接触摸时产生边框的css代码
ok~搞定
在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景;对于android则出现红色的边框。对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......
主要是在android手机的一个bug
使用css给模块设置了opacity:0,控制该模块隐藏,如果该模块包含a标签,其a标签在android手机是可以被触发的,而在iphone是不可以触发。
下图左图为模块一,当页面内容未加载完成时,显示该模块;右图为模块二,当页面内容完全加载成功后才显示该模块,模块二通过设置了完全透明使其隐藏在模块一的上一层级。
![](http://images.cnitblog.com/blog/278431/201302/28121019-bd32352d792e41ea9b69dd9165748666.jpg)
在android手机中,当处于模块一状态时,用户触摸到“查看按钮”,a标签的边框显示出来,这明显不是我们要想要的体验。
![](http://images.cnitblog.com/blog/278431/201302/19212951-6468b845c9e742daa1ef1dc02702f26b.jpg)
最后跟产品经理沟通后,针对android手机去除上图的按钮边框,那么如何去除android手机自带的按钮边框呢?
在搜索引擎中找到资料-webkit-tap-highlight-color可以去除边框,如下图:
![](http://images.cnitblog.com/blog/278431/201302/28122717-e4b8828ab30b45d8aa4a7a199cbcf6c1.jpg)
排除误解
网络资料说这个属性只用于iOS(iPhone和iPad),其实是错误的,android手机大部分也是支持的,只是显示效果不一样,移动开发并不成熟,更多的还需要大家去实践来辨别真伪- -
-webkit-tap-highlight-color用法
webkit内核的浏览器,当用户点击一个链接或者通过js定义的可点击元素的时候,会出现一个半透明的灰色背景或者红色的边框。
如果想要禁用高亮,可设置颜色的alpha值为0,也就是属性值的最后一位设置为0就可以去除背景或者边框。
去除android链接触摸时产生边框的css代码
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */
ok~搞定
相关文章推荐
- [webkit移动开发笔记]之如何去除android上a标签产生的边框(转)
- [webkit移动开发笔记]之如何去除android上a标签产生的边框
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- 如何去除移动端链接a标签产生带色边框
- 【android开发笔记】如何让ImageButton去掉白色边框和让ImageButton具有点击效果
- 用图片做超链接标签<A></A>的热点的时候,如何去除超链接对图片产生的边框(忘了,加深下印象)
- [Kotlin&Anko开发Android入门学习笔记]-02Kotlin如何使用Android第三方库
- Android中EditText如何去除边框添加下划线
- Android EditText如何去除边框添加下划线
- Android应用开发笔记(13): Android移动应用界面的模板化设计
- Android中EditText如何去除边框添加下划线
- Android开发学习笔记:如何移除EditText上的输入焦点
- Android应用开发笔记——打造自己的标签栏
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- Android 如何去除桌面上下边框暗度逐渐变暗的效果
- WP开发笔记——去除 HTML 标签
- Android开发 如何去除标题栏title titleBar
- android初学之如何去除gridview点击时出现的黄色边框
- 我的Android笔记(一)―― hello world程序结构分析 - Android移动开发技术文章
- Android应用开发笔记——打造自己的标签栏(转载)