如何讓鏈結文字或圖案不要出現虛線框

在設計網頁時,有時我們發現在鏈結文字或圖案被按下後,如果使用者按「上一頁」回來,會發現鏈結物件周圍出現虛線框。在大部份時候,這對使用者是有幫助的,因為他們可以得知他剛才按了哪一個超連結。不過,這個虛線框也某種程度的破壞了畫面的美觀...

在設計網頁時,有時我們發現在鏈結文字或圖案被按下後,如果使用者按「上一頁」回來,會發現鏈結物件周圍出現虛線框。在大部份時候,這對使用者是有幫助的,因為他們可以得知他剛才按了哪一個超連結。不過,這個虛線框也某種程度的破壞了畫面的美觀。那麼,如果要把這個虛線框消除,應該怎麼做呢?很簡單,在 <A ..> 裡面加入  hidefocus=true 就可以了,例如:

   <A href=...  hidefocus = "true">ABCDE</A>

若加上這一道指令,在 Visual Studio 中會出現語法警告,因為它並不認識這個指令。不過在 IE 下執行起來卻會是正常的。

然而, 問題是只有 IE 才認得這個屬性, 其它瀏覽器就不一定了。比較好的做法是使用 CSS 中的 outline-style 來指定, 如下所示:

   <A href=...  style = "outline-style: none;">ABCDE</A>

不過話說回來, 如果考慮到你的讀者是習慣使用鍵盤操作的人, 或者視障朋友的話, 讓 outline 消失的副作用是讀者可能會看不到目前被 focus 的圖片、連結或按鈕; 所以美觀或者方便性, 就必須慎重考量取捨了。


Dev 2Share @ 點部落