去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结。

在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景;对于android则出现红色的边框。对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......

主要是在android手机的一个bug

使用css给模块设置了opacity:0,控制该模块隐藏,如果该模块包含a标签,其a标签在android手机是可以被触发的,而在iphone是不可以触发。

下图左图为模块一,当页面内容未加载完成时,显示该模块;右图为模块二,当页面内容完全加载成功后才显示该模块,模块二通过设置了完全透明使其隐藏在模块一的上一层级。

在android手机中,当处于模块一状态时,用户触摸到“查看按钮”,a标签的边框显示出来,这明显不是我们要想要的体验。

最后跟产品经理沟通后,针对android手机去除上图的按钮边框,那么如何去除android手机自带的按钮边框呢?

在搜索引擎中找到资料-webkit-tap-highlight-color可以去除边框,如下图:

排除误解

网络资料说这个属性只用于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标签产生的边框的更多相关文章

  1. [webkit移动开发笔记]之如何去除android上a标签产生的边框(转)

    转载地址:http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html 去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段 ...

  2. 去除Android打开软件出现的红边框

    /********************************************************************** * 去除Android打开软件出现的红边框 * 说明: ...

  3. android开发笔记(一)Android studio 输入法

    以前都是用的时候查资料做些增添即可,现在下决心系统学习下. 首先发现developer.Android.com在开发工具上开始推出了 Android Studio了,不过他自己没有sdk manage ...

  4. 钉钉开发笔记(5)android系统中html软键盘的适配

    最近项目中发现个别Android手机中存在弹出的软键盘会遮挡输入框的现象,最后自己写了一个方法(如下),问题基本解决. 记录下来,防止忘记.有什么不对的地方欢迎指正.O(∩_∩)O 1 //键盘适配 ...

  5. 安卓开发笔记(三十一):shape标签下子类根结点的具体使用

    在我的上一篇博文当中阐述了我们如何使用shape标签进行自定义控件,这里对shape控件的属性进行阐述,不知道如何使用这些属性的可以参见我的上一篇博文(自定义Button):https://www.c ...

  6. STM32F412应用开发笔记之六:使用片上Flash存储参数

    我们的项目中需要保存一些系统配置参数,这些数据的特点是:数量少而且不需要经常修改,但又不能定义为常量,因为每台设备可能不一样而且在以后还有修改的可能.这就需要考虑这些参数保存的问题.将这类数据存在指定 ...

  7. node.js开发笔记之EXPRESS与EJS之ejs标签v20140329

    本次记录下ejs的渲染标签 node既然是javascrip的,那么很多在前端执行代码的方式都可以放在后台从而达到无缝连接! 比如 var ygxx = function(){document.get ...

  8. odoo开发笔记 -- 单台物理服务器上,利用docker部署多套odoo应用

    部署结构: 待更新! ----服务器硬件配置: 操作系统:ubuntu16.04-64bit CPU/内存:4核8G 1. 基础环境安装 nginx离线安装: docker环境安装: 2. 官方容器镜 ...

  9. 尝试笔记 01 之 CSS 边角上的标签

    作者: 八月未见 博客: https://www.cnblogs.com/jmtm/ 以下内容我仅尝试了Firefox浏览器,其他浏览器效果未知. 尝试做一个 CSS 写的角标,因为不能把它移到角落去 ...

随机推荐

  1. oracle 分页(rownum的理解) 以及 树节点的查询

    1:什么是rownum, rownum的生成, rownum相关的符号操作 Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 O ...

  2. C++之路进阶——bzoj1030(文本生成器)

    F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser  hyxzc Logout 捐赠本站 Notice:由于本OJ建立在 ...

  3. struts_22_xwork校验器列表使用说明

    系统提供的校验器列表如下: required (必填校验器,要求field的值不能为null) requiredstring (必填字符串校验器,要求field的值不能为null,并且长度大于0,默认 ...

  4. struts请求基本类型参数接收

    01:导包,web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version ...

  5. ppaer 67 : matlab 函数errorbar

    MATLAB ERRORBAR 这个函数的意思是:ERRORBAR(X,Y,L,U),X是自变量,Y是因变量,L是Y的变动下限,U是Y的变动上限 errorbar(X,Y,E)  X是自变量,Y是因变 ...

  6. 算法第四版 在Eclipse中调用Algs4库

    首先下载Eclipse,我选择的是Eclipse IDE for Java Developers64位版本,下载下来之后解压缩到喜欢的位置然后双击Eclipse.exe启动 然后开始新建项目,File ...

  7. [tp3.2.1]让默认页面: 加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.

    QQ:让index.php默认加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.AA:复制index.php命名为admin.php复制(新建)A ...

  8. 验证(Javascript和正则表达式)

    昨天写了验证(C#和正则表达式),今天又写了个js版的验证.现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发.由于今天才开始接触js,所以可能会有一些错漏,希望大家能批评指正. va ...

  9. ssh-keygen+ssh-copy-id 在linux下实现ssh无密码登录访问(转)

    转自:http://blog.csdn.net/pennyliang/article/details/8556662 ssh-keygen+ssh-copy-id 在linux下实现ssh无密码登录访 ...

  10. 编写更少bug的程序的六条准则

          如何编写更少bug的程序?  尽可能避免常见的程序错误.              沟通设计先行 + 编写可复用代码 + 做得更多 + 做的更少 + 创造“编程心流”+ 严格的程序测试   ...