css 去除按鈕、連結中的虛線框

文章目錄

• 如何去除虛線框

如何去除虛線框

對於如何去除虛線框，有很多人推薦這樣寫：

1 a:focus, input[type=button] ,input[type=submit] {2         outline:none;3 }

從這段代碼來看，讓我們小分析一下，有兩點可能是需要我們注意的：

1. 去除不全面

   IE6/7 並不支援 outline 屬性, firefox 下 input 的虛線並沒有去除

2. 去除太多

   除 IE6/7 外的所有瀏覽器的按鈕（firefox沒去掉）和連結都被去掉虛線框

這是看起來矛盾的兩個問題。其實不然，因為是兩個現同性質的問題。從技術上，這個方法並不全面。從體驗上，我想你也知道，我們只是去掉部分不需要的，去掉全部並不友好。所以，上面的寫法個人並不推薦。

 

我能在用 TAB 鍵的時候不去掉虛線框嗎？為什麼我的 input 在 firefox 下沒有成功去除虛線框？這些問題被提出的時候，困擾著不少人。因為這裡面有潛規則。總結一下，看這個表：

去除的方式             生效的瀏覽器

outline:none      IE8 | Firefox | Webkit |Opera

hidefocus          IE

:focus{outline:none;}    IE8 | Firefox | Webkit | Opera

:active{outline:none;}    同上，但在tab的時候，IE將保留虛線框

::-moz-focus-inner{outline:none;}   Firefox 存著bug，input 須要去這個偽狀態下的邊框