Remove button and Black Line Summary of link border

It's nothing to end with. The summary is complete. Let's look at it. The black box does damage the aesthetic of the page, so it's easy to get rid of it!

Some time ago, I saw a discussion on removing the "link/button" Dashed box on the Forum. Here I will record the methods I know and make a comparison.

Method 1: Use expression (this. hidefocus = true) in IE, and use outline: none in Firefox. (All buttons except FF do not take effect)Code:...
CSS:
.hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */
.hideFocus{outline: none;}  /* for firefox 1.5 + */
HTML:
<A href = "#" class = "hidefocus"> I am a link and do not want a dotted line </a>
<Br/>
<Input type = "button" value = "I'm a button, and people don't want a dotted line."/>

The disadvantage of this method is that using expression in IE increases the burden on the browser, and the button cannot take effect in ff.

Method 2: Use JS onfocus = blur (); all take effect; Code:
CSS:None
HTML:
<A href = "#" onfocus = "Blur ()"> I am a link and do not want a dotted line </a>
<Br/>
<Input type = "button" value = "I'm a button, and people don't want dotted lines either." onfocus = "Blur ()"/>

The advantage of this method is that you do not need to write any CSS code or adapt to any situation. the disadvantage is that JS needs to be used, and the "link/button" will lose the focus status, which may cause trouble when detecting the "link/button" Focus status.

Method 3: Use the outline/border/zoom attribute to implement code:
CSS:
. Hidefocus2 {outline: 0; ZOOM: 1 ;}
. Hidefocus2:-moz-focus-inner {border-color: transparent! Important;}/* Make the button under FF take effect */
HTML:
<H3> method 3: combining outline/border/zoom attributes <A href = "#" class = "hidefocus2"> I am a link and do not want a dotted line </a>
<Br/>
<Input type = "button" value = "I'm a button, and people don't want a dotted line."/>

This method does not show obvious shortcomings for the moment, but it is not clear at the moment that ZOOM: 1; why can we remove the dotted line from IE6 because haslayout was promoted? After clarifying this issue, you will be back to record it.

PS: method 3: learn from "http://bbs.blueidea.com/thread-2929061-1-1.html". Thank you for sharing it!

 

Address: http://eosite.javaeye.com/blog/579171