禁用焦点上的锚 (<a>) 元素上的灰色边框答案

【问题标题】：Disable grey border on anchor (<a>) elements on focus禁用焦点上的锚 (<a>) 元素上的灰色边框
【发布时间】：2010-11-25 04:25:45
【问题描述】：

我试图让锚标签周围出现的丑陋的灰色边框消失。 CSS 属性outline:none; 适用于 Firefox，但我如何在 IE 中做到这一点？最好使用 CSS 表达式或 jQuery。顺便说一句，我并不担心可访问性。

根据您的建议，我发现这些是最好的解决方案：

jQuery（适用于 IE 浏览器）：

$('a').focus(function() {
    $(this).blur();
});

另一个 jQuery 选项（仅适用于 IE 浏览器）：

$('a').focus(function() {
    $(this).attr("hideFocus", "hidefocus");
});

CSS（适用于所有其他强制轮廓的浏览器）：
```
a {
    outline: none;
}
```

注意：某些浏览器（例如 Google Chrome）不会强制轮廓聚焦。

【问题讨论】：

你有正在发生的事情的例子吗？
单击此页面上的任何链接，您会注意到每个链接周围都有一个边框（不一定是灰色）虚线边框。您可以在 Firefox 中禁用此功能，但对于 IE，您需要基于 JavaScript 的解决方案。
Chrome 是什么意思？当我浏览它们时，我会在链接上看到一个橙色的轮廓。
我不担心通过标签。当你点击一个链接时，会出现一个丑陋的边框，让标签之类的东西看起来像垃圾。

标签： javascript jquery css anchor

【解决方案1】：

a {
  outline: 0 none !important;
  border: none;
}

【讨论】：

【解决方案2】：

a {outline:noneIE 8}css 似乎在 Firefox、Chrome 和 IE 8 上运行良好。

【讨论】：

【解决方案3】：

这不行吗？

a
{
   border: 0;
}

【讨论】：

边框与轮廓不同，所以这行不通。
有些网站建议outline:0；作为解决方案

【解决方案4】：

除非我错过了正在讨论的虚线边框，否则 outline:none 在 Internet Explorer 8 中有效（至少对我而言）。而是突然之间，一些超链接以虚线边框呈现（我记得唯一更改的属性是 display:inline 在包含链接的 h2 元素上，然后出现虚线边框）。所以我扔了一个{大纲：无； } 在我的全局样式表和 poof 中，IE8 中不再有边框！

【讨论】：

【解决方案5】：

不幸的是，我认为 hideFocus 是您的最佳答案，因为模糊并不总是合适的：

<a href="..." hidefocus="hidefocus">...</a>

http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx

【讨论】：

顺便说一句，这是一个非标准属性，不是 JavaScript 解决方案。您也可以在 JavaScript 中使用 hideFocus 属性进行设置，但静态设置更容易。
本身并没有什么“错误”，但你失去了可能产生奇怪效果的积极关注的元素（例如标签顺序等）。除了单击（例如键盘）之外，还有其他激活链接的方法。如果您只想隐藏专注的外观，那么在您不必更改焦点时也没有任何意义。
合理使用 hideFocus()。
其实hideFocus是一个属性而不是一个方法，所以如果你坚持使用JavaScript来做这个，那么你会想要做this.hideFocus = true;，你只需要这样做一次元素。
@gnarf Jquery 方式：$("a").attr('hideFocus', 'hidefocus'); HTML 方式：<a href="" hideFocus="hidefocus"></a>

【解决方案6】：

对于 IE，你可以像这样使用 Javascript：

<a href="..." onfocus="this.blur();">Click Here</a>

对于 Firefox 和 Safari，outline:none 有效。

【讨论】：

不要这样做，它会破坏键盘导航。笔记本电脑用户和各种残疾人不会感谢您。有临时设置element.onfocus=element.blur onmousedown （单击后再次摆脱它）之类的解决方法，但对于 IE（以及其他人的大纲）来说，真正的 hideFocus 更简单。

【解决方案7】：

听起来您在谈论当您浏览链接时出现的虚线边框。您有 Firefox 的正确解决方案（大纲：CSS 中没有）。我用于 IE 的最佳解决方案是添加一个移除焦点的 onfocus 侦听器：

<a href="" onfocus="this.hideFocus=true;">link</a>

查看此站点，了解如何在全球范围内执行此操作的示例：http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

【讨论】：

$("a").focus(function(){ this.hideFocus=true; }); 用于执行该链接所建议的 jquery 方式