鏈接元素虛線框如處圖所示：
我們採用htc文件的辦法來解決這個問題。首頁將以下代碼保存為link.htc文件。
JavaScript代碼 http://www.lin04com.cn/
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>
在HTML文件中寫入以下代碼，建立一個鏈接：
XML/HTML代碼
1. <a href="#" title="cssview,lin04com,css+div">cssview</a>
我們開始為此鏈接定義CSS樣式：
CSS代碼
a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
}
a:hover {
background:#ddd;
}
CSS樣式確定了鏈接的外觀，具有一定寬度與高度的塊元素。文字水平左右均居中對齊。
我們在a標籤的樣式內，加入一條屬性。用此消除鏈接的虛線邊框：
CSS代碼
a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
behavior:url(line.htc);
} 我們運行以下代碼查看效果：
XML/HTML代碼
<!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_52css.htc)}
a:hover { background:#ddd; }
</style>
</head>
<body>
<a href="/" title="cssview">cssview.cn</a>
</body></html>
我們在IE7、IE6中預覽，已經沒有問題了。但是在FF中虛線框依然存在。
我們新增一條樣式定義來解決此問題。
CSS代碼
a:focus { outline:0; }
查看最終的運行效果：
XML/HTML代碼
<!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_52css.htc)}
a:hover { background:#ddd; }
a:focus { outline:0; }
</style>
</head>
<body>
<a href="/" title="cssview">cssview.cn</a>
</body></html>
沒有留言:
張貼留言