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

 

結果

 

 

確定取消 確定取消