2010年3月24日 星期三

[引用]去除链接元素的虚线框(兼容IE7、IE6、FF)

來源:http://www.lin04com.cn/?action=show&id=30&page=1#cm1828
鏈接元素虛線框如處圖所示:


我們採用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>

【下列文章您可能也有興趣】

沒有留言: