Question

活动超链接文本以虚线边框突出显示。当在这样的超链接上使用效果（fadeIn / fadeOut）时，它会产生奇怪的效果。如何禁用/删除虚线边框？

Answer 1

试试这个CSS：

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

请注意，这必须遵循任何a:hover规则。感谢您在评论中使用PEra建议使用a:selected选择器。

注意

以上不在IE 9中工作。删除a：selected会使其在IE9中工作。

Answer 2

这样做的典型和安全的方法是：

a:active, a:focus {
   outline:  none; /* non-IE */
   ie-dummy: expression(this.hideFocus=true); /* IE6-7 */
}

由于{8}已在IE8中被删除，因此您可能需要一个脚本：

expresssion()

如果您要删除默认焦点大纲，必须为if (document.documentElement.attachEvent) document.documentElement.attachEvent('onmousedown',function(){ event.srcElement.hideFocus=true }); 定义自己独特的风格，否则键盘用户将很难使用您的网站。

Answer 3

小心点。虚线边框是键盘浏览的重要部分。它会突出显示要点击的链接。

a:active { outline: none; }

作者Nathan Smith在他的博客上提供了a more thorough discussion of this以及各种相关问题。

Answer 4

a:active, a:focus {
    outline:none;
}

Answer 5

尝试使用此CSS：

Mozilla ：

|:-moz-any-link:focus { outline: none; }

|:focus { outline: none; }

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

IE8 ：

a:active, a:focus { 
    border:none;
    outline:none;
}

Answer 6

a { outline: none; }打破了键盘的可用性。 a:active {}选择器似乎在上次我在Firefox中检查时打破了它。

有一种JS方法可以摆脱边界而不会破坏任何东西，还有JS代码可以摆脱IE6和IE7中的边界。

我在my tutorial中描述了这个方法。

Answer 7

JavaScript中的解决方案，用于删除所有浏览器上链接的活动边框：在您的链接上添加 onfocus =“this.blur（）;”事件

<a href="#" onfocus="this.blur()"> Link </a>

注意：这适用于所有浏览器。

Answer 8

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

从这里采取： http://www.cssjunction.com/css/remove-dotted-border-in-ie7/

Answer 9

这个对我来说效果最好

a{
  outline: 0;
}

Answer 10

我想让这个为Button工作，这对我有用

button { 

    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    background-color: transparent;
    noFocusLine: expression(this.onFocus=this.blur());
}

Answer 11

你也可以在对象和嵌入上使用outline：0。一些基本的归零css看起来像这样：

a, a:visited { 
    text-decoration:none;
    color: #e3a512; 
    }
a:hover, a:active, a:focus { 
    text-decoration:none;
    color: #fff;
    outline:0;
    }
object, embed, a, a img, a:active, a:selected, a:visited {
    outline:0
    }

Answer 12

a img {border: none; }

就是这样，不需要复杂化。

如何使用CSS删除IE8中活动超链接周围的虚线边框

12 个答案: