当点击聚焦 a 标签的时候，在 a 标签的区域周围会有一个虚线的框，这个框不同于 border 属性，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。
这个就是a标签被聚焦后出现了虚线框，也就是 outline。
一般解决方法
<pre class="prettyprint lang-html">a:focus {
outline: none; }
</pre>
声明，这是个不能兼容的 css 属性，在ie6、ie7、遨游浏览器都不兼容。
并不是所有的浏览器都有虚线框出现，像 safari、opera、goole 浏览器等本身就不支持这个效果，所以看不到。只有 fox、ie8 在加了 outline:none 后会取消聚焦的虚线框。所以说这个 outline 属性基本上用处不大。
怎么样才能兼容所有浏览器呢？常用方法有三种：
1：在 a 标签里加入js控制，当 a 标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。
<pre class="prettyprint lang-html">测试
</pre>
这里设置聚焦时触发 blur(); 强制取消焦点。
2：在 a 标签里嵌套其他标签，比如 span 或者 var 等等，把内容放在被嵌套的标签里。这时候点击这个链接，聚焦的是 a 的子标签，自然不会聚焦在 a 标签上，所以也能避免这个问题。
3：不适用 a 标签做链接，采用其他标签，使用 js 做出 hover 的效果，在 css 里加入 cursour:pointer; 设置鼠标以上时变小手。给用户是链接的错觉。使用 js 做点击时的页面跳转等。最大的缺点是对 se 友好性比前两种差很多。
这三种方法的共同点是比较麻烦，相比较而言，推荐第一种，第二第三也视不同的情况而定。也是会用到的。
我认为 outline 的这个效果时浏览器迟早要取消掉的，所以关于这个属性的知识也相当的鸡肋。
或者还可以在 css 中加入：
<pre class="prettyprint lang-css">body a {
outline:none;
blr:expression(this.onFocus=this.blur()); }</pre>
