如何去除点击后的虚线

outline:none 所有浏览器都支持 outline 属性。

定义和用法

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

注释:轮廓线不会占据空间,也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性:

  • outline-color
  • outline-style
  • outline-width

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

网上大多的解决方案是:

1、a {outline: none; star:expression(this.onFocus=this.blur());}

调用js比较频繁的情况下,建议用:

2、a:active {outline: none; star:expression(this.onFocus=this.blur());}

写在a:active里,意思就是点击时才执行,才去掉虚线框。这样鼠标在放上A和默认的情况下就不会太耗资源。

最好兼容效果:

a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}

=== Chrome, Safari ===
这两个浏览器在点击链接时本身没有虚线框

=== Jquery ===
如果你使用Jquery框架的话,可以添加以下代码即可实现

$("a").bind("focus",function() {
    if(this.blur) {this.blur()};
});

终极解决方案:

a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
:focus { outline:0; }

我认为还是:a:focus { outline:none;-moz-outline:none;} /*focus为获取焦点的伪类*/  比较好用的

原文地址:https://www.cnblogs.com/Better-Me/p/4159694.html