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

　　最近在写移动端页面，测试时发现一个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. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  2. ASP.NETCore的Kestrel服务器

    什么是Kestrel服务器 Kestrel是开源的(GitHub提供的源代码),事件驱动的异步I / O服务器,用于在任何平台上托管ASP.NET应用程序.这是一个监听服务器和一个命令行界面.您将侦听 ...

  3. Centos7-卸载自带的jdk 安装jdk8

    卸载JDK Centos7一般都会带有自己的openjdk,我们一般都回用oracle的jdk,所以要卸载 步骤一:查询系统是否以安装jdk #rpm -qa|grep java 或    #rpm ...

  4. 共轭梯度算法求最小值-scipy

    # coding=utf-8 #共轭梯度算法求最小值 import numpy as np from scipy import optimize def f(x, *args): u, v = x a ...

  5. elasticsearch聚合查询

    作者注:本文系作者自己的理解.希望大家多多交流指正 官网java API term是代表完全匹配,也就是精确查询,搜索前不会再对搜索词进行分词,所以我们的搜索词必须是文档分词集合中的一个 TermsB ...

  6. Oracle 视图 （待更新， 缓存）

    参考: 视图.索引.存储过程优缺点: http://www.cnblogs.com/SanMaoSpace/p/3147059.html oracle视图总结(转):http://tianwei013 ...

  7. 安卓studio导入jra包和so包,百度地图so包加载

    导入so包 这个我只接受测试可用的一种方法 第一步:把so包放在libs目录下,可以是文件夹也可以是单独的一个个so文件 然后在src同级的目录下找到build.gradle文件下如下信息 sourc ...

  8. PHP 构造方法 __construct()（转）

    PHP 析构方法 __destruct() 构造方法是类中的一个特殊方法.当使用 new 操作符创建一个类的实例时,构造方法将会自动调用,其名称必须是 __construct() . 在一个类中只能声 ...

  9. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  10. apache编译安装参数说明

    apache编译安装参数说明 ./configure //配置源代码树--prefix=/usr/local/apache2 //体系无关文件的顶级安装目录prefix ,也就apache的安装目录. ...