移除手机端a标签点击自动出现的边框和背景

手机端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; 都可以将该阴影透明化，进而解决那个丑丑的边框问题

时间： 2024-11-08 00:06:11

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

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

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

【重播工具箱】MTK全方案手机端APP，一键备份自动生成线刷包源码思路解析

这个是本人MTK工具箱,在 5月份的时候,发布的..功能可能说是全球首发把,第一个手机MTK的一键备份工具,而且是兼容MTK全方案.MTK6589 MTK6592 6575 82等, 现在将源码以及思路,分享给大家,有兴趣的可以看看. 源码解析以及思路,待发布....... 分享地址:http://www.592zn.com/thread-311286-1-1.html 下载地址http://pan.baidu.com/s/1hqeethy重大更新: 1.手机端首发,备份MTK系列全自动,生成线

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

a,button,input,textarea,label,i,em{/*highlight*/ -webkit-tap-highlight-color: rgba(255,0,0,0); border: 0; -webkit-appearance: none; }

手机端audio部分手机无法自动播放处理

<section class="music rotate"> <audio loop src="/static/wishChina/music1.mp3" id="audio_play" autoplay preload></audio> </section> //下面为jquery处理,加载完成,则调用该方法,播放音乐 function audioAutoPlay(id) { var audio

PC端变成手机端的时候，把特效去掉（把canvas标签去掉）

PC端变成手机端的时候,把特效去掉(把canvas标签去掉)<script> if (screen.width < 768){ $('canvas').remove(); }</script> /*if($('window').width()<768){ $('canvas').css('display','none'); }*/ jQuery这种方法获取不到

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

dede手机端首页点击文章内容、列表，却跳到pc端

手机访问到手机端首页,点击列表.内容.图片等都跳到pc端,是什么原因? 查看m模板里面的index.html文件生成的代码是绝对路径(数字随机)13.html 而不是view.php?aid=13 解决办法是什么? 首先在templets--------default---------找到index_m.html 打开index_m.html文件,查看调用代码 [field:arcurl /]这个调用代码是调用pc端的,只要换成view.php?aid=[field:id/]就可以正常跳转到手机

（淘宝无限适配）手机端rem布局详解

一. 首先我们先来看看淘宝不同分辨率下的适配页面可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识二.了解一些移动端的知识viewport的<meta>标签用法其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大移动端开发中,通常我们都会采用<meta nam

手机端的viewport属性

Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. 该值为分辨率之间的比,不是直接比较像素.分辨率是指单位英寸内像素数,类似于PPI.pc端浏览器中dpr的值都为1,所以css中1px的元素在屏幕中占据1物理像素.但在手