萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 去除鏈接元素的虛線框（兼容IE7、IE6、FF）
去除鏈接元素的虛線框（兼容IE7、IE6、FF）
DIVCSS實例教程：去除鏈接元素的虛線框（兼容IE7、IE6、FF）-浏覽器兼容教程
Web的發展非常迅速，UI設計也越來越美觀，漂亮。同時也給WEB前端編碼提出了新的要求。鏈接元素在點擊時會出現虛線框，由於種種原因，您的主管可能要求你想辦法將鏈接虛線邊框出除。
我們采用htc文件的辦法來解決這個問題。首頁將以下代碼保存為link.htc文件。
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
在HTML文件中寫入以下代碼，建立一個鏈接：
<a href="#" title="三連素材">3lian.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);
}
我們運行以下代碼查看效果：
<!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實例教程：去除鏈接元素的虛線框 - . </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_3lian.htc)}
a:hover { background:#ddd; }
</style>
</head>
<body>
<a href="http://." _fcksavedurl="http://." title="三連素材">3lian.com
</body></html>
我們在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實例教程：去除鏈接元素的虛線框 - . </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_3lian.htc)}
a:hover { background:#ddd; }
a:focus { outline:0; }
</style>
</head>
<body>
<a href="http://." _fcksavedurl="http://." title="三連素材">3lian.com
</body></html>
