請輸入關鍵字

一般情況下,點擊一個超鏈接,會在這個鏈接上出現一個虛線的邊框虛線,實際上通過響應onfocus事件去掉該邊框,比如

<a href="http://www.ningoo.net" onfocus=this.blur()>NinGoo</a>

當然,要是這樣去修改網站中所有的鏈接來實現該效果,肯定是不現實的。通過在CSS的鏈接屬性里加一條語句,可以做到批量修改:

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章