之前一直用的方法都是:express
a {outline: none;star:expression(this.onFocus=this.blur());}浏览器
后来发现有瑕疵,不完美。体如今页面调用JS动做比较频繁的状况下,页面很卡~~~半个月内遇到两次这个问题,都是本身公司的平台。而网上却没有关 于这个的说法·~~而你们也都是循序渐进,我不得不写一写。框架
解决办法就是写成这样:ide
a:active {outline: none;star:expression(this.onFocus=this.blur());}this
有 的人怀疑,未什么不直接写在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和火狐浏览器,样式直接写成如下就能够:io
a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
也能够单独写:function
===IE===
为连接添加onFocus事件
if(this.blur)this.blur()或者用IE的私有属性hideFocus="hide";原理
===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; }
若是页面上只有一两个连接的话,直接加到<a>里面也行,就像这样
<a href=”#” onFocus=”this.blur()”><img src=”logo.jpg” border=0></a>