css消除a标签点击后的虚线框

 当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个虚线框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过Firefox或者IE等几个版本看到。而Safari、Opera、Google浏览器等本身就不支持这个效果，所以看不到。 这个就是a标签被聚焦后出现了虚线框，也就是outline。

     取消a标签点击后的虚线框方法：

1：在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

[html]  view plain  copy

1. <a href="#" onfocus="this.blur();">测试</a>  

    这里设置聚焦时触发blur()，强制取消焦点。

2：在a标签里嵌套其他标签，比如span 或者var等，把内容放在被嵌套的标签里。这时候点击这个链接，聚焦的是a的子标签，自然不会聚焦在a标签上，所以也能避免这个问题。

3：hidefocus是ie的私有属性

[html]  view plain  copy

1. <a href=”#” hidefocus=”true” >hidefocus</a>  

4：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。     

[html]  view plain  copy

1. a:focus {  
2.      outline:none;  
3.      -moz-outline:none;  
4.      }  

综合方法3和4，消除a虚标签虚线框的推荐方法是：IE下使用hidefocus属性， Firefox/Chorme/Opera/Safari下用outline:none。

即:

[html]  view plain  copy

1. <a href=”#” hidefocus=”true” >链接</a>  

[html]  view plain  copy

1. a:focus {outline-style:none; -moz-outline-style: none;}