Various ways to remove link dotted boxes with CSS and JS_html/css_WEB-ITnose

When we click on a link, a dotted box will be displayed around the link. So how to remove this dotted box? In fact, there are many methods, just use CSS, but using javaScript seems to be a good method as well.

1. CSS method to remove the link dotted frame:
In IE, use the html attribute: hideFoucs, and add the hidefocus="true" attribute to the HTML tag, but this attribute is IE If it is private, Firefox will not recognize it. Front-end framework example

. Code

Processed with CSS in IE:

. Code

1. a{noOutline:expression(this.onFocus=this.blur());}/* "onFocus" Note the case*/

Firefox’s processing method is more in line with the standard. You only need to set a:focus{outline:none} in the CSS style code. Next, let’s take a look at the unified processing method in MSIE and FF:

. Code

1. a{
2. outline:none ; /*FF*/
3. noOutline:expression(this.onFocus=this.blur());/*IE*/
4. }

Considering performance optimization, you can refer to the following code:

. Code

1. a{outline:none;}
2. a:active{noOutline:expression(this.onFocus=this.blur());}
3. :focus{outline:0;}

2. Use js to solve the link virtual box method: front-end framework example

. Code

2. $("a").bind("focus", function(){
3. if(this.blur){
4. this.blur();
5. }
6. });