介绍下去掉虚线框的几种方式

1.CSS样式表的outline属性（IE9、FF等浏览器推荐）

　　对于最新的IE9浏览器以及FireFox里可以使用outline:none，去掉虚线框，当然FF下还可以写成-moz-outline:none。

a:focus {

outline:none;

-moz-outline:none;

}

　　2.IE的hidefocus=true属性（IE8及以下版本推荐）

　　对于版本低于IE9的IE浏览器，我们可以使用hidefocus方法，就比如：

<a href="index.php" hidefocus="true"></a>

　　3.onfocus事件的this.blur();

　　这个方法效果比较好，但是感觉语义化不好，原理是在获得焦点时去掉焦点。

<a href="index.php" onfocus="this.blur();"></a>

　　好吧，介绍了这三种办法，下面我们可以分情况整合一下，比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。

var anchors = document.getElementsByTagName_r('a');

for (var i=0; i < anchors.length; i++) {

anchors[i].hideFocus = true;

}

// 或者采用this.blur()的方式，比如像下面这样写

var anchors = document.getElementsByTagName_r('a');

for (var i=0; i < anchors.length; i++) {

anchors[i].onfocus = function() {

this.blur();

}

}

　　上面的办法有个缺点，就是遍历了所有的A链接标签，可能有些链接我们依然希望它能够有虚线框，如何只让指定的链接去除虚线框呢？对于IE9及 FF、Chrome、Safari等浏览器，我们依然可以通过outline:none的形式去除，当然我们可以定义一个指定的CSS样式比 如.hidefocus，就像下面那样：

.hidefocus:focus {

outline:none;

-moz-outline:none;

}

　　然后我们就通过

<a class="hidefocus" href="index.php">链接文本</a>

这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢？其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。

　　遍历class的办法有getElementsByClassName，不过可惜的是IE9以下不支持这个方法，当然有人写过全兼容版本的 getElementsByClassName，大家可以看看我这里找到的一个getElementsByClassName 新窗口打开: code.google.c…sbyclassname版本。

　　然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。

<!--[if lt IE 9]>

<script type="text/javascript">

addDOMLoadEvent(

function() {

var anchors = getElementsByClassName('hidefocus');

for (var i=0; i<anchors.length; i++) {

anchors[i].hideFocus = true;

}

}

);

</script>

<![endif]-->