去除連結元素的虛線框 相容IE7、IE6、FF_經驗交流
來源：互聯網
上載者：User
推薦下面的代碼
複製代碼 代碼如下:
a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }
下面的代碼比較麻煩
我們採用htc檔案的辦法來解決這個問題。首頁將以下代碼儲存為link.htc檔案。
複製代碼 代碼如下:
在HTML檔案中寫入以下代碼，建立一個連結：
jb51.net
我們開始為此連結定義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);
}
我們運行以下代碼查看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIVCSS執行個體教程：去除連結元素的虛線框 - www.jb51.net</title> <style type="text/css"> a { display:block; width:100px; height:30px; line-height:30px; text-align:center; overflow:hidden; behavior:url(attachments/month_0805/line743_52css.htc)} a:hover { background:#ddd; } </style> </head> <body> 55CSS.com </body></html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
我們在IE7、IE6中預覽，已經沒有問題了。但是在FF中虛線框依然存在。
我們新增一條樣式定義來解決此問題。
複製代碼 代碼如下:
a:focus { outline:0; }
查看最終的運行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIVCSS執行個體教程：去除連結元素的虛線框 - www.52CSS.com </title> <style type="text/css"> a { display:block; width:100px; height:30px; line-height:30px; text-align:center; overflow:hidden; behavior:url(attachments/month_0805/line743_52css.htc)} a:hover { background:#ddd; } a:focus { outline:0; } </style> </head> <body> 55CSS.com </body></html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
在IE7、IE6、FF中均成功實現了消除連結的虛線框。
