如何去除点击链接后的虚线框

以前一直用的方法都是：

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

　　后来发现有瑕疵，不完美。体现在页面调用JS动作比较频繁的情况下，页面很卡~~~半个月内遇到两次这个问题，都是自己公司的平台。而网上却没有关于这个的说法·~~而大家也都是按部就班，我不得不写一写。

　　解决办法就是写成这样：

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

　　有的人怀疑，未什么不直接写在a里呢，为什么不这样写呢a {outline: none;star:expression(this.onFocus=this.blur());}，这样不是可以包含了所有的A了吗？其实这样理论上是对的，原来我也这么用，原来也发现没什么问题，可最近在做另一个项目的时候，页面调用的JS比较多，问题就来了~整个页面会很卡，起初找不到原因，一直抓狂~~~后来一个个排除原因，最终找到罪魁祸首竟然是CSS样式表·~~

　　因为如果写在A里，那么不管是鼠标放上，鼠标点击，还是默认，都会执行star:expression(this.onFocus=this.blur());，这个代码相对于IE来说就是一个CSS的动作调用，和JS原理一样，页面资源耗不起啊，也算是IE的BUG吧~~~我们实现的效果是要点击的时候没有虚线，所以就写在a:active里就可以了，意思就是点击时才执行，才去掉虚线框。这样鼠标在放上A和默认的情况下就不会卡。

　　要同时兼容IE和火狐浏览器，样式直接写成以下就可以：

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

　　也可以单独写：

===IE===
为链接添加onFocus事件
if(this.blur)this.blur()

===Firefox===
添加CSS
:focus{outline:0}
该CSS可以作为全局存在，即在样式表中单独存在一行该代码即可时全页面的链接不带有虚线框

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

===Jquery框架===
如果你使用Jquery框架的话，可以添加以下代码即可实现(raycross 提供)
$("a").bind("focus",function() {
if(this.blur) {this.blur()};
});

最终我的用法是在CSS文件直接加入：

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

评论

1 楼 lz12366 2011-09-08  

expression好像 IE7不支持吧。、。你IE什么版本啊 ？？