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

【问题标题】：How to remove dotted border around active hyperlinks in IE8 with CSS如何使用 CSS 删除 IE8 中活动超链接周围的虚线边框
【发布时间】：2010-11-11 16:26:25
【问题描述】：

活动的超链接文本以虚线边框突出显示。当对此类超链接（淡入/淡出）使用效果时，它会产生奇怪的效果。如何禁用/移除虚线边框？

【问题讨论】：

标签： css internet-explorer-8

【解决方案1】：

试试这个 CSS：

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

请注意，这必须在任何 a:hover 规则之后。感谢 cmets 中的 PEra 建议也使用 a:selected 选择器。

注意

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

【讨论】：

对我来说，这在 IE8 中有效，但 FF3.5 忽略了它。当链接处于活动状态时，它仍然显示虚线边框。有什么想法吗？
忽略，我发现FF忽略了这个css :(
我真的不确定；也许这个问题的其他答案会对你有更多帮助。
我也必须为 a:visited 设置这些。
a:selected 在 IE9 中似乎不起作用。从上面的 sn-p 中删除该选择器对我有用。

【解决方案2】：

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

a:active { outline: none; }

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

【讨论】：

可能想说键盘浏览而不是标签浏览。
是的，对于残疾人来说，这是必须的。

【解决方案3】：

典型且安全的方法是：

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

由于expresssion() 已在 IE8 中被淘汰，您可能需要一个脚本：

if (document.documentElement.attachEvent)
    document.documentElement.attachEvent('onmousedown',function(){
         event.srcElement.hideFocus=true
    });

如果您要删除默认的焦点轮廓，您必须为:focus 定义自己独特的样式，否则键盘用户将很难使用您的网站。

【讨论】：

【解决方案4】：

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

在不破坏任何东西的情况下，有一种JS去除边框的方法，以及在IE6和IE7中去除边框的JS代码。

我在my tutorial中描述了方法。

【讨论】：

@Barney，果然，他没有那样做，现在他的代码不见了，哈哈

【解决方案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;
}

【讨论】：

【解决方案6】：

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

【讨论】：

欢迎来到 SO！请尽量在你的答案中更明确一点。这是完全正确的，但有点信息湖。您也可以对代码使用格式功能。再次，欢迎来到 SO！

【解决方案7】：

a img {border: none; }

就是这样，无需复杂化。

【讨论】：

【解决方案8】：

您还可以在对象上使用 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
    }

【讨论】：

【解决方案9】：

在 JavaScript 中删除所有浏览器上链接的活动边框的解决方案：在您的链接上添加事件 onfocus="this.blur();"

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

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

【讨论】：

css 在科尔多瓦应用程序中对我不起作用，但它起作用了
这是我发现的唯一适用于 IE9 按钮的方法。我已经打算放弃了。非常感谢！

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

这个最适合我

a{
  outline: 0;
}

【讨论】：

【解决方案12】：

我想让它为 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());
}

【讨论】：