手机端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. Ajax学习系列——Ajax介绍及优缺点

    一.什么是Ajax Ajax即“Asynchronous JavaScript And XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. Ajax = 异步Jav ...

  2. 十四、SAP中定义自定义变量

    一.利用关键字TYPE定义类型,然后在定义此类型的变量,代码如下: 二.效果如下:

  3. 001、MySQL查询服务器版本号和当前日期

    SELECT VERSION(), CURRENT_DATE; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.

  4. 吴裕雄--天生自然C++语言学习笔记:C++ 指针

    每一个变量都有一个内存位置,每一个内存位置都定义了可使用连字号(&)运算符访问的地址,它表示了在内存中的一个地址. #include <iostream> using namesp ...

  5. zTree的学习

    最近要做一个有关权限的东西,原理和数据库都已经知道了,就是树状图困难. 原先是打算用layui的,因为我孤陋寡闻……吃了大亏,弄了3个小时,屁都没有.只能说是…… 后来百度找到了zTree,进去学习了 ...

  6. Node.js的启动和调试方式

    通过node命令启动 node server/bin/www webstorm配置启动入口 pm2 全局安装:cnpm i pm2 -g 检查版本:pm2 -v 启动:cd 项目目录 pm2 star ...

  7. 【Android】家庭记账本手机版开发报告二

    一.说在前面 昨天 完成了对记账本的账单的增删 今天 完善昨天的框架结构( 1.引入ViewModel管理数据.使MainActive 只管理界面.不再管数据了 2.引入AsyncTask.后台执行. ...

  8. 再战希捷:西部数据透露96层闪存已用于消费级SSD

    导读 96层堆叠3D NAND闪存已经成为行业主流,包括西部数据这样的传统机械硬盘大厂,也在逐步普及96层闪存,并已经用于消费级SSD. 96层堆叠3D NAND闪存已经成为行业主流,包括西部数据这样 ...

  9. 关于SI522替代FM17522和MFRC522的资料对比

    以下是SI522与FM17522.MFRC522的对比参数: SI522是完全PIN对PIN软硬件兼容MFRC522.CV520.FM17522,另外我们可提供一对一技术支持解决客户所遇到的问题: 1 ...

  10. 13 —— node 获取文件属性 —— 加载第三方模块

    以加载第三方时间处理模块( moment )为例 : 一,加载 npm install moment 二,使用介绍 1,点击进入npm官网 https://www.npmjs.com/ 2,搜索 mo ...