在設計網頁時,有時我們發現在鏈結文字或圖案被按下後,如果使用者按「上一頁」回來,會發現鏈結物件周圍出現虛線框。在大部份時候,這對使用者是有幫助的,因為他們可以得知他剛才按了哪一個超連結。不過,這個虛線框也某種程度的破壞了畫面的美觀...
在設計網頁時,有時我們發現在鏈結文字或圖案被按下後,如果使用者按「上一頁」回來,會發現鏈結物件周圍出現虛線框。在大部份時候,這對使用者是有幫助的,因為他們可以得知他剛才按了哪一個超連結。不過,這個虛線框也某種程度的破壞了畫面的美觀。那麼,如果要把這個虛線框消除,應該怎麼做呢?很簡單,在 <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 的圖片、連結或按鈕; 所以美觀或者方便性, 就必須慎重考量取捨了。