小叶白龙博客 outline是css3的一个属性，用的很少。声明：这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容。
outline控制的到底是什么呢？
当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果，所以看不到。下面是outline的样子示例，也是我正在做的一个页面上截取出来的。
这个就是a标签被聚焦后出现了虚线框，也就是outline;
基本上这个是没有用的效果，大多数情况下我们会希望不要出现这种效果，于是给a标签设置outline:none;很遗憾的是，ie6、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友好性比前两种差很多。
这三种方法的共同点是比较麻烦，相比较而言，推荐第一种，第二第三也视不同的情况而定。也是会用到的。
或者还可以在css中加入body a{outline:none;blr:expression(this.onFocus=this.blur());}
以下总结去掉虚线框的几种常用方法：
| 去除虚线框的方法 | 优劣 | 兼容性 | 是否中断tab |
|---|---|---|---|
| <a href=”#” onfocus=”this.blur()”>this blur</a> | 链接聚焦触发时失去焦点，js和html耦合在一起 | 没有兼容性问题 | 是 |
| a:focus {outline:none}或 a{outline:none} |
outline由css2.1引入，去除虚线框视觉上的问题正是css的职责 | ie6/ie7不支持,ie8+/ff /safari/opera[2]支持 | 否 |
| <a href=”#” hidefocus=”true” >hidefocus</a> | 该属性是ie的私有属性[3] | ie5+支持 | 否 |
| a { noFocusLine: expression(this.onFocus = this.blur())} | 可批量处理，但expression的性能问题不能忽视 | expression ie6/7支持，ie8+、非ie不支持 | 是 |
综合以上，去除链接虚线框的推荐方法是：
ie下用hidefocus属性，ff/chorme/opera/safari下用outline:none。
input按钮button等都适用即:
<a href=”#” hidefocus=”true” >链接</a>
a:focus {outline:none;}或a{outline:none}
