纯CSS去除按钮以及链接点击时虚线

这个效果的实现重点在于我在无意中发现了IE下的一个bug，这个bug在特定环境会导致按钮或链接点击时失去虚线。

其它浏览器就比较简单，支持CSS2的浏览器可以通过设置outline解决，FF的button标签通过私有属性特别处理，DEMO在多个主流浏览器测试通过。

 

 

<style type="text/css">  
    .wrap{position:relative;}  
    .btns{zoom:1;}  
    .btns *{outline:0;zoom:1;background:#f2f2f2;}  
    .btns button::-moz-focus-inner{border-color:transparent!important;}  
</style>  
<div class="wrap">
    <div class="btns">  
        <button type="button">确定</button><button type="button">取消</button>  
        <a href="#">确定</a><a href="#">取消</a>  
    </div>
</div>

 

结果

 

 

确定取消 确定取消