手机端a标签会自动补充出现边框或者背景,使得用户知道a标签的点击状态,但样式很不好看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
a{
border:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
outline:none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">测试边框</a>
</body>
</html>
其中对a添加样式
a{
border:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
outline:none;
}

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; 都可以将该阴影透明化,进而解决那个丑丑的边框问题

												

移除手机端a标签点击自动出现的边框和背景的更多相关文章

  1. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  2. Trick:如何去掉html标签点击时的蓝色边框

    我们在用html标签时,如input.button.select,img标签时,点击标签经常出现一个蓝色的边框,这个边框真的很low,想要去掉怎么办   其实,css有样式可以设置一下,这个问题就轻松 ...

  3. 去除手机端a标签等按下去背景色

    a,button,input,textarea,label,i,em{/*highlight*/ -webkit-tap-highlight-color: rgba(255,0,0,0); borde ...

  4. a标签点击触发 layer open 只显示背景解决

    问题:公司网站突然说有个查看信息的点击不好使了,有时候点击无反应,但是href执行了,有时候弹出只有背景,不显示内容.网上找了a标签的各种方法尝试后,均不能解决. 代码:类似如下,method()方法 ...

  5. 手机端页面访问PC页面自动跳手机端代码

    <script> var mobileAgent = new Array("iphone", "ipod", "ipad", & ...

  6. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  7. js判断手机端操作系统的两种方法

    //判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL ="http://xxx/xxx.apk"; var browser = { ver ...

  8. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  9. 手机端flex、字体设置、快速点击

    ;(function flexible (window, document) { var docEl = document.documentElement ♥1 var dpr = window.de ...

随机推荐

  1. nginx location语法解释

    1.没有修饰符 表示:必须以指定模式开始,如:              默认模式 server { server_name baidu.com; location /abc { …… } } htt ...

  2. bzoj 1369: [Baltic2003]Gem

    确实是神2333333333,一开始以为是01染色sb题,然而被打脸... (蒟蒻不乱说,网上各种神犇的题解,还有图!!) #include <bits/stdc++.h> #define ...

  3. Oracle Exadata 学习笔记之核心特性Part1

    近年来,国内众多厂商都有一体机的产品,不过更多都是围绕硬件本身的堆砌和优化,那么这些产品和Oracle一体机最大的区别在哪里呢?最近读了李亚的<Oracle Exadata技术详解>,系统 ...

  4. IDEA 分屏显示

    效果: 步骤: 对着某个标签页单击右键,选择Split Vertically或者Split Horizontally即可.

  5. Ubuntu 14.04 安装 Dash to Dock

    每次打开或选择一个已经打开的应用都要把鼠标指到左上角,相当费事. Ubuntu 14.04 GNOME自带 Tweaks (系统中名为:优化工具),可以使界面如Windows般(最小化.最大化.底部任 ...

  6. jenkins 最新版 搭建

    jenkins 中文网:https://jenkins.io/zh/ 点击下载:https://jenkins.io/zh/download/ 然后选择对应的安装环境,我的CentOS 7.6: 有外 ...

  7. [题解] LuoguP3321 [SDOI2015]序列统计

    感觉这个题挺妙的...... 考虑最暴力的\(dp\),令\(f[i][j]\)表示生成大小为\(i\)的序列,积为\(j\)的方案数,这样做是\(O(nm)\)的. 转移就是 \[ f[i+1][j ...

  8. Linux学习43 CCNA网络知识-计算机网络基础

    一.Linux网络配置属性 1.计算机网络 TCP/IP:协议簇,协议栈(使用的模型) ISO组织制定了OSI七层模型协议栈(学习的模型) 2.网卡 a.MAC:Media Access Contro ...

  9. 通过request获得全路径

     <% String test = request.getScheme()+"://"+request.getServerName()+":"+reque ...

  10. Bulma CSS - 开始

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 有数种方法可以 ...