css去掉a标签点击后的虚线框

outline是css3的一个属性，用的不多。

声明，这是个不能兼容的css属性，在ie六、ie七、遨游浏览器都不兼容。

outline控制的究竟是什么呢？

当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不一样于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会天然消失。你能够经过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等自己就不支持这个效果，因此看不到。

这个就是a标签被聚焦后出现了虚线框，也就是outline;

基本上这个是没有用的效果，大多数状况下咱们会但愿不要出现这种效果，因而给a标签设置outline:none;很遗憾的是，ie六、7和遨游浏览器里都不能实现，只有ff,ie8在加了outline:none后会取消聚焦的虚线框。因此我说这个Outline属性基本就是一个费属性。

怎么样才能取消这个虚线框呢？经常使用方法有三种：

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

<a href="#" onfocus="this.blur();">测试</a>
这里设置聚焦时触发blur();强制取消焦点。天然是屡试不爽。

2：在a标签里嵌套其余标签，好比span 或者var等等，把内容放在被嵌套的标签里。这时候点击这个连接，聚焦的是a的子标签，天然不会聚焦在a标签上，因此也能避免这个问题。

3：不适用a标签作连接，采用其余标签，使用js作出hover的效果，在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是连接的错觉。使用js作点击时的页面跳转等。最大的缺点是对se友好性比前两种差不少。

这三种方法的共同点是比较麻烦，相比较而言，推荐第一种，第二第三也视不一样的状况而定。也是会用到的。

我认为outline的这个效果时浏览器早晚要取消掉的，因此关于这个属性的知识也至关的鸡肋。

或者还能够在css中加入body a{outline:none;blr:expression(this.onFocus=this.blur());}

 

本文转自博客：RattanyiXu （仅用于学习记录）

原文地址：http://www.cnblogs.com/something/archive/2013/05/21/3090428.html