兩句CSS屬性讓點擊圖片連結時的虛線框消失

來源:互聯網
上載者:User
昨天做一個導航條,為了節省代碼,CSS屬性使用了一個Line-height,結果每次點擊導航,滑鼠過後,慘不忍睹啊。一個紮眼的虛線框,他沒包住圖片,也沒平均包住,虛線框錯位很嚴重,其他一切正常。總之,本來很酷了,有這個虛線就一切白費。

在藍色搜尋啊搜尋,看到了不少代碼,不少代碼還是很好用的,可就是有點太長了,有用純CSS的(寫了很長),也有用JS的(能用CSS的話我就不去用JS了)
最後,無意中看了一個屬性。
結果是,兩個CSS屬性就一切OK了。

雖然沒在藍色找到我最想要的,不過這裡的分享精神是在可敬,小弟不敢獨享,特註冊帳號,就為今天這一貼,希望能對需要這個效果的人提供點協助。

CSS 之
outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline 屬性是一個簡寫屬性,用於設定元素周圍的輪廓線。

注釋:輪廓線不會佔據空間,也不一定是矩形。

這就可以了,就給點選連結加這個屬性   a:active{outline:none}
可惜,IE下無效   再加一個  a:active {blr:expression(this.onFocus=this.blur());}

沒錯,就是這樣了
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
</style>
這樣網頁中的所有連結點擊都沒虛線框了(文字連結、圖片連結==)
樣本:
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
img,a .img{border:0}
</style>
<a href="#"> <img src="http://bbs.blueidea.com/images/default/newtopic.gif"></a><br>
<a href="#"> <img src="http://www.baidu.com/img/baidu_logo.gif"></a><br>
<a href="#">發新帖</a>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.