一般情況下,點擊一個超鏈接,會在這個鏈接上出現一個虛線的邊框虛線,實際上通過響應onfocus事件去掉該邊框,比如
當然,要是這樣去修改網站中所有的鏈接來實現該效果,肯定是不現實的。通過在CSS的鏈接屬性里加一條語句,可以做到批量修改:
blr:expression(this.onFocus=this.blur());
}
注:這個好像只有IE纔有效果,FireFox中還是有邊框虛線出現。
在某些特殊的情況下,比如做一個導航菜單的時候,出現這個情況時效果就很糟糕了,因爲Firefox會錯誤地擴大鏈接的邊框:
在Firefox的地址欄輸入about:config,回車。有一個配置項叫做“browser.display.focus_ring_width”,把它修改成0,點擊鏈接時就不會出現那個邊框。但這樣的話,在焦點落在按鈕上時也沒有了邊框指示。而且作爲一個開發者,在瀏覽器裏設置這個屬性,無異於掩耳盜鈴。
這實際上是Firefox在<a>這個標籤處於focus狀態時(pseudo selector - a:focus)給它加的outline屬性。
正確的解決辦法是在CSS里加一個規則:
a {
outline: none;
}
或者縮小範圍:
a:focus {
outline: none;
}
後者使得鼠標左鍵在鏈接上按下,鬆開之前的這段時間裏,仍會顯示虛線的outline.
在我看到的大部分網站中,都把這條規則寫在CSS裏。或許Firefox該考慮去掉這個的默認outline.