好久没有更新了,今天来一发 ^_^

  最近在写移动端页面,测试时发现一个a标签的bug:无论是iOS端还是Android端都存在,当点击a标签,会有一个矩形的透明的阴影闪一下(不同的浏览器阴影的颜色还不一样,有的是灰色,有的是淡蓝色的。。。)。

  在点击的时候还是相当明显的,这就显得比较违和了,没办法发现bug只得去想办法解决呀。

  在改的过程中,发现只有a标签会有这个问题,button和其他标签都不存在,那么久锁定a标签,测试bug是a标签的href属性导致的,搞了这么久,其实都是浏览器自动的效果,无非就是想提示用户按钮被点击到了,出发点是好的,但是在某些场景下久变异了_(:зゝ∠)_

  为解决这个bug,不用a标签也是不现实的,最后百度谷歌到css3的-webkit-tap-highlight-color这个属性,瞬间就解决了。

  详细信息见下图:

*注:图片来自ctrip-ued

移动端页面点击a标签会有半透明的阴影或红色边框的bug的更多相关文章

  1. 页面点击,不是a标签也会刷新原因

    页面点击,不是a标签也会刷新原因 点击事件冒泡,触发了a链接导致整个页面刷新了.直接阻止 事件冒泡即可 例子: $("tr .am-text-danger").click(func ...

  2. 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择

      在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...

  3. Python爬虫(二十三)_selenium案例:动态模拟页面点击

    本篇主要介绍使用selenium模拟点击下一页,更多内容请参考:Python学习指南 #-*- coding:utf-8 -*- import unittest from selenium impor ...

  4. 移动端,点击a标签链接的pdf报错 Resource interpreted as Document but transferred with MIME type application/pdf

    源码: <a href="11.pdf" class="actcont_a fl report_a" style="display: block ...

  5. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  6. 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】

    移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...

  7. ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px

    今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...

  8. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项,给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类,给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  9. angularJS在移动端的点击事件延迟问题

    在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular- ...

随机推荐

  1. ora-01190和ora-01110的解决方法

    SQLPLUS>ALTER DATABASE DATAFILE 2 ONLINE; ALTER DATABASE DATAFILE 2 ONLINE * ERROR 位于第 1 行: ORA-0 ...

  2. Mac下Charles Contents乱码解决办法

    用到Charles,下载最新的4.0.1版本,但是发生乱码问题.百度好久才找到个靠谱的,那些说什么在Info.plist文件加字符串的,都是假的,反正我是试了都没用,这里记下详细的操作步骤解决: 1. ...

  3. Java进阶篇(五)——Java的I/O技术

    程序中,为了永久的保存创建的数据,需要将其保存在磁盘文件中,以便在其它程序中使用它们.Java的I/O技术可以将数据保存到文本文件.二进制文件甚至是ZIP压缩文件中,以达到永久性保存数据的要求. 本篇 ...

  4. 一次线上tomcat应用请求阻塞的排查经过

    今天早上,收到一个报警,有个服务器的http往返时延飙升,同时曝出大量404,很是折腾了一番,特记录下思考和排查经过. 1.这是单纯的时延增大,还是有什么其他情况还未掌握? 因为不知道是只有时延变大而 ...

  5. mysql-innoDB-事务

    事务的隔离级别: READ UNCOMMITTED(未提交读) 在这个级别,事务中的修改,即使没有提交,对其他事务也都是可见的,事务可以读取未提交的数据. READ COMMITTED(提交读) 一个 ...

  6. xen虚拟机(Centos6.6)的创建和扩容

    好久没来更博了,从这篇开始,我准备好好梳理一下Hadoop的那些"事".本人技术渣一枚,只是本着知识共享的原则,希望将我所掌握的知识分享出来.若文中有错误的地方,欢迎大家告知我,我 ...

  7. jquery与js添加子元素

    例如在select中添加option JQuery做法: <select id="myselect" name="myselect"> </s ...

  8. Servlet--超链接,表单提交,重定向,转发4种情况的路径

    实际编码中我们经常写路径,写路径既可以写相对路径,也可以写绝对路径.我2年以前我就养成了习惯,只要是写路径我从来都是写绝对路径,因为万一将来我们的项目的目录发生变化,原来要是写相对路径的话就会有路径依 ...

  9. git 对 Microsoft Word 进行版本控制

    昨天中国高校发生了一件骇人听闻的事情,听说不少高校的校园网用户连接校园网被勒索病毒给黑了,重要文件全部被加密,必须要支付赎金才能解密,具体新闻可以参见:http://www.sohu.com/a/14 ...

  10. 二目运算符 “->”

    -> 在C语言中称为间接引用运算符,是二目运算符,优先级同成员运算符“.”.用法:p->a,其中p是指向一个结构体的指针,a是这个结构体类型的一个成员.表达式p->a引用了指针p指向 ...