当点击聚焦 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>