The following code is recommended
Copy CodeThe code is as follows:
a {outline:none;/* for Forefox */}
A {star:expression (This.onfocus=this.blur ());/* for ie*/}
The following code is more troublesome
We use the HTC file approach to solve this problem. Home Save the following code as a LINK.HTC file.
Copy CodeThe code is as follows:
Write the following code in the HTML file to create a link:
Jb51.net
We begin to define CSS styles for this link:
A
Display:block;
width:100px;
height:30px;
line-height:30px;
Text-align:center;
}
a:hover {
Background: #ddd;
}
A CSS style determines the appearance of a link, a block element with a certain width and height. The text level is aligned around the center.
We add a property within the style of the A tag. Use this to eliminate the dotted border of the link:
A
Display:block;
width:100px;
height:30px;
line-height:30px;
Text-align:center;
Behavior:url (LINE.HTC);
}
We run the following code to see the effect:
<textarea id="runcode55764"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>divcss Example Tutorial: Removing the dotted box for link elements-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> </pead> <body> 55css.com </body></ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
We have a preview in IE7 and IE6, there is no problem. However, the dashed box still exists in FF.
We have added a new style definition to solve this problem.
Copy CodeThe code is as follows:
A:focus {outline:0;}
View the final run effect:
<textarea id="runcode47478"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>divcss Example Tutorial: Removing dotted boxes for link elements-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> </pead& Gt <body> 55css.com </body></ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
In IE7, IE6, FF, a dashed box was successfully implemented to eliminate links.
