[转]去除按钮、链接中的虚线框

原帖地址:http://sofish.de/1366  (幸福收藏夹)

 

话说，对于去除虚线框，即使是一个前端开发工作者，也可能不知道所有的潜规则。因为很多情况下，它是一个视觉上的辅助，并且盲人们需要它（怎么个需要法，别问我），我们并不需要去掉。但在图片替换文字，或者虚线显示不规则的时候，去掉它对于一个产品来说会是更完美的。

如何去除虚线框

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

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

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

 

1. 去除不全面

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

2. 去除太多

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

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

关于潜规则、关于BUG

Demo: 去虚线框 | remove outline

我能在用 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 须要去这个伪状态下的边框

好吧，不得不承认的是，这些小事，都还真是一门学问，我们要好好学习，好好积累。多用点心，把东西做得更好。

 

 

================================

我的jquery解决方法,$(object).attr("hideFocus","true");

同时CSS中设置:

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

转载于:https://www.cnblogs.com/lucoy/articles/2336614.html