a標籤點擊後的虛線框問題

之前一直用的方法都是:express

a {outline: none;star:expression(this.onFocus=this.blur());}瀏覽器

後來發現有瑕疵,不完美。體如今頁面調用JS動做比較頻繁的狀況下,頁面很卡~~~半個月內遇到兩次這個問題,都是本身公司的平臺。而網上卻沒有關 於這個的說法·~~而你們也都是循序漸進,我不得不寫一寫。框架

解決辦法就是寫成這樣:ide

a:active {outline: none;star:expression(this.onFocus=this.blur());}this

有 的人懷疑,未什麼不直接寫在a裏呢,爲何不這樣寫呢a {outline: none;star:expression(this.onFocus=this.blur());}, 這樣不是能夠包含了全部的A了嗎?其實這樣理論上是對的,原來我也這麼用,原來也發現沒什麼問題,可最近在作另外一個項目的時候,頁面調用的JS比較多,問 題就來了~整個頁面會很卡,起初找不到緣由,一直抓狂~~~後來一個個排除緣由,最終找到罪魁禍首居然是CSS樣式表·~~事件

因 爲若是寫在A裏,那麼無論是鼠標放上,鼠標點擊,仍是默認,都會執行 star:expression(this.onFocus=this.blur());, 這個代碼相對於IE來講就是一個CSS的動做調用,和JS原理同樣,頁面資源耗不起啊,也算是IE的BUG吧~~~咱們實現的效果是要點擊的時候沒有虛 線,因此就寫在a:active裏就能夠了,意思就是點擊時才執行,纔去掉虛線框。這樣鼠標在放上A和默認的狀況下就不會卡。資源

要同時兼容IE和火狐瀏覽器,樣式直接寫成如下就能夠:io

a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
也能夠單獨寫:function

===IE===
爲連接添加onFocus事件
if(this.blur)this.blur()或者用IE的私有屬性hideFocus="hide";原理

===Firefox===
添加CSS
:focus{outline:0}
該CSS能夠做爲全局存在,即在樣式表中單獨存在一行該代碼便可時全頁面的連接不帶有虛線框

===Chrome, Safari===
這兩個瀏覽器在點擊連接時自己沒有虛線框

===Jquery框架===
若是你使用Jquery框架的話,能夠添加如下代碼便可實現(raycross 提供)
$(「a」).bind(「focus」,function() {
if(this.blur) {this.blur()};
});

最終個人用法是在CSS文件直接加入:

a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
:focus { outline:0; }

若是頁面上只有一兩個連接的話,直接加到<a>裏面也行,就像這樣

<a href=」#」 onFocus=」this.blur()」><img src=」logo.jpg」 border=0></a>

相關文章
相關標籤/搜索