快捷導(dǎo)航

去除鏈接元素的虛線(xiàn)框兼容IE7、IE6、FF

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

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

推薦下面的代碼

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

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

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

下面的代碼比較麻煩
我們采用htc文件的辦法來(lái)解決這個(gè)問(wèn)題。首頁(yè)將以下代碼保存為link.htc文件。

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

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

<script language="javascript">   

function hscfsy(){   

this.blur();   

}   

</script>

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

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

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

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

我們?cè)贗E7、IE6中預(yù)覽，已經(jīng)沒(méi)有問(wèn)題了。但是在FF中虛線(xiàn)框依然存在。
　　我們新增一條樣式定義來(lái)解決此問(wèn)題。

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

a:focus { outline:0; }

查看最終的運(yùn)行效果：

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

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