CSS去掉A标签(链接)虚线框的方法

当点击聚焦 a 标签的时候,在 a 标签的区域周围会有一个虚线的框,这个框不同于 border 属性,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。

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

一般解决方法

a:focus { 
    outline: none; 
}
声明,这是个不能兼容的 css 属性,在ie6、ie7、遨游浏览器都不兼容。 并不是所有的浏览器都有虚线框出现,像 safari、opera、goole 浏览器等本身就不支持这个效果,所以看不到。只有 fox、ie8 在加了 outline:none 后会取消聚焦的虚线框。所以说这个 outline 属性基本上用处不大。 怎么样才能兼容所有浏览器呢?常用方法有三种: 1:在 a 标签里加入js控制,当 a 标签被聚焦时,强制取消焦点,这时候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()); 
}
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

相关推荐

评论

    暂无评论...