快捷導(dǎo)航

去除鏈接元素的虛線框兼容IE7、IE6、FF

更新時間：2008年05月27日 15:59:39 作者：

Web的發(fā)展非常迅速，UI設(shè)計也越來越美觀，漂亮。同時也給WEB前端編碼提出了新的要求。鏈接元素在點擊時會出現(xiàn)虛線框，由于種種原因，您的主管可能要求你想辦法將鏈接虛線邊框出除。

推薦下面的代碼

a {outline: none; /* for Forefox */ }  

a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }

下面的代碼比較麻煩
我們采用htc文件的辦法來解決這個問題。首頁將以下代碼保存為link.htc文件。

復(fù)制代碼代碼如下:

 
<public:attach event="onfocus" onevent="hscfsy()"/>   

<script language="javascript">   

function hscfsy(){   

this.blur();   

}   

</script>

　　在HTML文件中寫入以下代碼，建立一個鏈接：
<a href="#" title="腳本之家">jb51.net</a>
　　我們開始為此鏈接定義CSS樣式：

a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
}
a:hover {
　　background:#ddd;
}
　　CSS樣式確定了鏈接的外觀，具有一定寬度與高度的塊元素。文字水平左右均居中對齊。
　　我們在a標簽的樣式內(nèi)，加入一條屬性。用此消除鏈接的虛線邊框：

a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
　　behavior:url(line.htc);
}
　　我們運行以下代碼查看效果：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

我們在IE7、IE6中預(yù)覽，已經(jīng)沒有問題了。但是在FF中虛線框依然存在。
　　我們新增一條樣式定義來解決此問題。

復(fù)制代碼代碼如下:

a:focus { outline:0; }

查看最終的運行效果：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

在IE7、IE6、FF中均成功實現(xiàn)了消除鏈接的虛線框。