css 去除按钮、链接中的虚线框

如何去除虚线框

对于如何去除虚线框,有很多人推荐这样写:

1 a:focus, input[type=button] ,input[type=submit] {
2         outline:none;
3 }

从这段代码来看,让我们小分析一下,有两点可能是需要我们注意的:

  1. 去除不全面

    IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除

  2. 去除太多

    除 IE6/7 外的所有浏览器的按钮(firefox没去掉)和链接都被去掉虚线框

这是看起来矛盾的两个问题。其实不然,因为是两个现同性质的问题。从技术上,这个方法并不全面。从体验上,我想你也知道,我们只是去掉部分不需要的,去掉全部并不友好。所以,上面的写法个人并不推荐。

 

我能在用 TAB 键的时候不去掉虚线框吗?为什么我的 input 在 firefox 下没有成功去除虚线框?这些问题被提出的时候,困扰着不少人。因为这里面有潜规则。总结一下,看这个表:

去除的方式             生效的浏览器

outline:none      IE8 | Firefox | Webkit |Opera

hidefocus          IE

:focus{outline:none;}    IE8 | Firefox | Webkit | Opera

:active{outline:none;}    同上,但在tab的时候,IE将保留虚线框

::-moz-focus-inner{outline:none;}   Firefox 存着bug,input 须要去这个伪状态下的边框

 

posted @ 2012-08-21 09:42  小2010  阅读(938)  评论(0编辑  收藏  举报