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

2020-10-23 18:34:48

字體：大中小

來源：轉載

供稿：網友

推薦下面的代碼

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
<public:attach event="onfocus" onevent="hscfsy()"/>   
<script language="javascript">   
function hscfsy(){   
this.blur();   
}   
</script>  

　　在HTML文件中寫入以下代碼，建立一個鏈接：
<a href="#" title="武林網">VeVB.COm</a>
　　我們開始為此鏈接定義CSS樣式：

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

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

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

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

復制代碼代碼如下:

a:focus { outline:0; }

查看最終的運行效果：

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

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

上一篇：DIV border邊框顯示不完全問題的解決方法

下一篇：Internet Explorer 8 beta 中文版與IE7共存的解決方法