石周明

点击链接有虚线的问题 在很多细节方面会影响用户对产品的使用体验 作为web csser总是想方设法地去取消点击链接的虚线 从而提高用户体验 于是onfocus="this.blur()" 来了 于是 a{blr:expression(this.onFocus=this.close());}也来了 更有甚者htc js等等方法接踵而至···

但是csser终究还是钟爱css··· 不知道有多少哥们儿在多少个夜晚里为了用纯css的手段去解决这个问题而挑灯夜战 更有甚者 为之而寝食不安 神魂颠倒···

那今天 CSS神作 终于出现：
<style type="text/css">  

.wrap{position:relative;}  

.btns{zoom:1;}  

.btns *{outline:0;zoom:1;}  

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

.btns *{outline:0;zoom:1;}
btns下所有的元素outline的值都为0 取消其虚线 zoom：1在这里意义貌似不大 可以取消

.btns button:-moz-focus-inner{border-color:transparent!important;}
是为btns下的按钮而单独设置的

.wrap{position:relative;}
关键是这句 最外层的box要相对定位

但是 这里面有个缺陷 就是貌似对最外层的这个wrap不可以设置宽高之类的值···如果有宽或高 点击链接还是会有虚线的···

据作者的解释是这样的
感谢作者