Divcss Instance Tutorial: Removing dotted boxes for link elements (compatible IE7, IE6, FF)-Browser compatibility tutorials
Web development is very rapid, UI design is more and more beautiful, beautiful. At the same time, it also puts forward new requirements for the Web front-end coding. Link elements appear dotted when clicked, and for a variety of reasons your supervisor may ask you to find a way to remove the dotted border of the link.
We use the HTC file approach to solve this problem. First, save the following code as a LINK.HTC file.
| <public:attach event= "onfocus" onevent= "Hscfsy ()"/> <script language= "JavaScript" > function Hscfsy () { This.blur (); } </script> |
Write the following code in the HTML file to create a link:
| <a href= "#" title= "three-link material" >3lian.com</a> |
We started to define CSS styles for this link:
| A Display:block; width:100px; height:30px; line-height:30px; Text-align:center; } a:hover { Background: #ddd; } |
The CSS style determines the appearance of the link, with a certain width and height of the block element. The text is centered around the horizontal.
We add a property to the style of a label. Use this to eliminate the dotted border of a 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:
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title>divcss Instance Tutorial: Removing dotted boxes for link elements-www.3lian.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_3LIAN.HTC)} a:hover {background: #ddd;} </style> <body> <a href= "http://www.3lian.com" _fcksavedurl= "http://www.3lian.com" title= "three-link material" >3lian.com </body> |
We have a preview in IE7, IE6, no problem. However, the dotted box still exists in FF.
We'll add a new style definition to solve this problem.
| A:focus {outline:0;} |
To see the final run effect:
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title>divcss Instance Tutorial: Removing dotted boxes for link elements-www.3lian.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_3LIAN.HTC)} a:hover {background: #ddd;} A:focus {outline:0;} </style> <body> <a href= "http://www.3lian.com" _fcksavedurl= "http://www.3lian.com" title= "three-link material" >3lian.com </body> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
