CSS 語法教學 – 去除超連結的虛線外框

用 CSS 去除超連結醜醜的虛線

大部份瀏覽器的預設狀態,在點選超連結的時候,都會出現虛線外框,常常有同學反應,很多老闆都不喜歡這樣的虛線外框,醜醜的很不好看,可不可以去除掉…

當我們在網頁上用滑鼠點到超連結的時候,在文字或是圖片的外面就會出現一個虛線外框,如下圖:

CSS 語法 - 網頁設計  - CSS 語法教學 - 去除超連結的虛線外框 - 001

 

這種虛線外框在一般平常的時候並不會引起特別的困擾或問題~

但是,當我們使用 CSS 語法把文字替代為圖片之後,點到超連結時就會出現一個超大的虛線外框,如下圖:

CSS 語法 - 網頁設計  - CSS 語法教學 - 去除超連結的虛線外框 - 002

挨呀呀~ 這下事情可大條啦~ 於是咱們飛肯設計學苑的老師就召開緊急討論會議~

經過男丁老師和梅干老師的密商~ 找到了解決方法~

在 CSS 語法之中對超連結 a{ } 裡面加上「 outline: none; 」就可以去除 Firefox 和 Google Chrome 上的虛線

然後,再混合使用 Javascript 語法「 behavior:expression(this.onFocus=this.blur()); 」就可以去除 IE 上的虛線

完整語法~ 如下所示:

a{
      outline: none; /* for Firefox Google Chrome  */
      behavior:expression(this.onFocus=this.blur()); /* for IE */
}

 

醜醜的虛線外框終於消失了~ 危機解除~ 呼~ CSS 語法 - 網頁設計  - CSS 語法教學 - 去除超連結的虛線外框 - smil490936d2e1442

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , .

迴響已被關閉。