2007-03-12

移除連結的虛線外框 (Remove the link outline)

不知道什麼時候開始,在瀏覽器上,當點到某些連結的時候,總會有個虛線外框在上面,尤其在我黑色的 Blog 樣版上格外明顯,一直以來都很礙眼。這兩天剛好看到一篇文章,解決了我長久以來的疑惑,原來這也是 CSS 屬性的一部份啊!雖然這個變數名稱很怪,而且不同瀏覽器還都不一樣,不過經測試,果然徹底的解決了這個問題,順手就寫篇文章記下來。

所謂連結的虛線外框就是像這樣,括在「發表時間」的外面:

怎麼拿掉呢?只要你在定義的 CSS 裡面,對基本標籤 <A> (標註連結用的)做樣式 Style 宣告做修改就好了,在自己網頁的 CSS 宣告區段(在 Blogger 裡面,就是範本 </head> 標籤前,一堆定義 ID & Class 的地方),放入下面這些 CSS Code(如果不是放在區段內的獨立宣告,記得以下整段要加上 style 的標籤前後括起來):

/* Remove the link outline */
a {
  noFocusLine:expression(this.onFocus=this.blur());
} /* For IE */
:focus {
  -moz-outline-style: none;
} /* For Firefox */

如果只想對一個連結這麼做,則只要在 <A> 標籤內設定屬性,範例如下(紅色的部分為屬性):

<a href="http://www.google.com" hidefocus="true">Google</a>

說實話我從來沒看過這些屬性和樣式變數,不過既然有用,當然就套用囉!這個 CSS Code 適用於各種瀏覽器、網頁文章和系統。

參考文章:
[CSS]hideFocus Property

回應: 2

匿名 提到...

請問 我還是找不太到地方


不懂怎麼用

可以幫幫我嗎!?

我想把虛線都移除..

匿名 提到...

看錯了這篇是連結虛線

有什麼辦法能把 文章跟連結 分隔的虛線移除掉呢

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!