纯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 >

 

结果

 

 

确定 取消 确定 取消