how to remove dotted border around the link in IE7

问题

There is border around button and link when click.

could anyone help me solution to remove it.

回答1:

It's ugly, but so are most IE fixes.

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

回答2:

You can preset it like that :

:focus{
    outline:0; /*removes the dotted border*/
}

But remember (for accessibility reasons) to set the style "later" in your CSS file to something more visible. For example :

a:focus, a:active{
    color:#ff5500; /*different color than regular*/
}
input[type=submit]:focus, input[type=submit]:active{
    background-color:#444; /*different color than regular*/
}

回答3:

Try this one

a:hover, a:active, a:focus {
  outline: 0;
 }

回答4:

To start with, I can see one of your tags is IE7-bug, while this is actually more like a feature. The purpose of having this dotted outline is for users to be able to navigate between various controls using their mousewheel or the tab key.

In any case, to define the style of an element when it's "focused" use the CSS :focus selector. The property that styles this outline is, trivially, outline; outline: 0 will prevent the focus outline from appearing.

Note: You might want to apply that rule only on your button, and not on all elements, because some users might be used to seeing something to indicate focus, which makes it easier to navigate using the methods mentioned above.

Hope that helped in any manner.

回答5:

CSS outline is not supported in IE7. That "browser" requires the following CSS expression:

a {
    _noFocusLine: expression(this.hideFocus=true); 
}

It works also in newer versions.

回答6:

This would do the trick

a {
   outline:0;
}

回答7:

This will also work

    a 
    {
        outline-style:none;
    }

回答8:

a:link{ outline-style: none; }`

回答9:

Try setting the outline property:

a {
   outline: 0;
}

回答10:

Try

a {
     outline: none;
}

Always try to use css reset.This will help you to solve the problem like this.I use eric mayer css reset tool.

回答11:

Apply this rule to the input

input { outline : none ; }

回答12:

This is all around code to remove outerline and put in your your CSS under the desired class name. (className in IE.) Example for tags

a{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for all tags in your html page!

*{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for a tag with class myClassName in your html page!

.myClassName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Example for a tag with id myidName in your html page!

#myidName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;

}

Hope this helped Works in major browsers and if not they are so old so the chance of how many people there still are using this old browsers!

Notes: outline:none 0; does also work in newer browsers but not in all. But outline:0; is universal and in those browsers there don´t understand 'none' and you get theres default value, but 0 understand in all browsers there are using this outline:. And you need this for IE7 _noFocusLine:expression(this.hideFocus=true);

or use Javascript for the rest!

window.document.getElementById("myidName").blur();
window.document.getElementById("myidName").hideFocus=true;
window.document.getElementById("myidName").style.outline=0;

Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;

or with check if element exist!

if (window.document.getElementById("myidName")){
    Obj=window.document.getElementById("myidName");
    Obj.blur();
    Obj.hideFocus=true;
    Obj.style.outline=0;
}

Javascript can do the trick for IE6 and IE7 and other CSS can´t!