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为获取焦点的伪类*/ 比较好用的