去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少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. SQL封装、多态与重载

    面向对象1.类:众多对象抽象出来的2.对象:类实例化出来的 3.类的定义关键字 class 4.类里面包含成员变量成员属性 成员方法 5.面向对象三大特性(1)封装目的:保护类,让类更加安全.做法:让 ...

  2. jQuery习题的一些总结

    1.在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has $("div:has(s ...

  3. haskell笔记2

    模式匹配 # haskell_test.hs length' :: [a] -> a length' [] = 0 length' (_:x) = 1 + length' x as模式 xs@x ...

  4. css 标签 清除浮动

    .clearfloat:after{content: "";clear:both;display: block;}

  5. Ubuntu + CentOS7 搭建tftp Server

    基于Ubuntu系统做的tftp服务器,基于CentOS 7都差不多,书写了关键命令,测试过Ubuntu 12.0.4 和CentOS 7环境 1.介绍tftp服务器     TFTP(Trivial ...

  6. 《Focus On 3D Terrain Programming》中一段代码的注释一

    取自<Focus On 3D Terrain Programming>中的一段: //--------------------------------------------------- ...

  7. Jsoup的demao

    package com.ch.jsoupdemo; import java.io.IOException; import org.jsoup.Jsoup;import org.jsoup.nodes. ...

  8. Hadoop入门实践之从WordCount程序说起

    这段时间需要学习Hadoop了,以前一直听说Hadoop,但是从来没有研究过,这几天粗略看完了<Hadoop实战>这本书,对Hadoop编程有了大致的了解.接下来就是多看多写了.以Hado ...

  9. protocolbuffe

    protocolbuffer(以下简称PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.google 提供了多种语言的实现:java.c#.c++.go 和 python,每一种实 ...

  10. STM32的晶振跟HSE外部时钟设置.

    void RCC_Configuration(void){  /* RCC system reset(for debug purpose) */  RCC_DeInit(); /* Enable HS ...