利用IE的bug实现纯CSS去掉按钮或者链接点击产生的虚线

添加评论 2009年7月15日

九翼无意中发现了IE下的一个bug,这个bug是支持一段CSS代码在特定环境会导致按钮或链接点击时失去虚线。其实这个功能用处也蛮多的,像ie下带border的button点击时的表现、去掉tab的点击虚线等等。但遗憾的是在实践中发现,ie下还是容易受样式环境影响。其它浏览器就比较简单,支持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>

  1. 还没有评论.想坐沙发?
  1. 还没有 trackbacks
订阅评论