纯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>  
        
<href="#">确定</a><href="#">取消</a>  
    
</div>
</div>

 

结果

 

 

确定取消
posted @ 2009-06-01 19:58  _拖鞋_  阅读(258)  评论(0编辑  收藏  举报