outline的使用，大家都喜歡在reset樣式表中直接重置：
* {
outline: none;
}
Eric Meyers 在他的CSS Reset 是這樣重置的：
/* remember to define focus styles! */
:focus {
outline: 0;
}
這些方法大家都可以說常見了。可是有一點可能大家還是不太清楚——outline在表單的button中使用時，在firefox瀏覽器下依然還是會有虛線框顯示的。正好今天有一位朋友也問起這個問題，于是查了一下相關資料，才得知在Firefox下是需要使用別的方法來處理的。那么今天這個教程就簡單的來了解如何處理這個問題。
問題描述：
前面也說了，很多設計師喜歡使用：
*{outline:none;}
或者
:focus {outline:none;}
來解決焦點粗虛線框的問題。但是你有沒有注意到，使用這種方法，對于button在Firefox下還是會有虛線框的，如下圖所示：
解決方法：
解決這個bug我們需要使用Mozilla的一個私有屬性：-moz-focus-inner。不過這里有一點大家需要特別的注意：通過“-moz-focus-inner”并不是重置“outline”這個屬性的值，而是需要通過他來改變buttons的“border”樣式，具體的請看下面的代碼：
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
}
上面寫是包括了所有的input，但有時我們并不想這個值對“input[type=text]”有影響，那么我樣其實可以這樣來設置：
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
通過上面的代碼，那個難看的虛線框，我們就可以順利的移除：
這樣一來，我們其實對于button的outline設置需要這樣來設置,才能達到所有瀏覽器一樣的風格效果：
:focus {outline:none;} /*for IE*/
::-moz-focus-inner {border-color: transparent;} /*for mozilla*/
這樣表單button得到焦點，在各瀏覽器下的渲染效果就一致了。
上面是去除outline的邊框效果的寫法，但那樣或許不太好理解，那么你也可以像設置正常樣式那來理解，如下面的代碼所示：
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 1px dotted transparent;
}
button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
padding: 3px;
border-color: #F3F3F3;
}
上面的使用可算是一個小技巧吧，可能知道的人也蠻多的，我也就不在多說這樣的問題，因為要我來說是怎么一回事，我也實在沒有那樣的水平來說清楚，但我只知道這樣的方法能解決問題。那么有關于“outline”的使用還是蠻多的；希望上面的這段代碼大家用得上，如果你有更好的解決辦法，希望在評論中給我留言。
歡迎轉載：http://www.kanwencang.com/bangong/20161116/55411.html
文章列表
留言列表
