去除虚线轮廓

锚链接（<a>）默认情况下，当它们变为“活动”或“聚焦”状态时，周围会出现虚线轮廓。在 Firefox 3 中，颜色由文本的颜色决定。我相信在早期版本和一些其他浏览器中，默认颜色是灰色。这是为了辅助功能而设置的默认样式。对于无法使用鼠标的用户，他们仍然需要一些视觉指示来表明他们当前有一个链接处于活动状态（例如，他们可以按 Enter 键导航到该链接）。

您可以自己尝试一下，点击一个链接，然后在松开鼠标之前将鼠标移开该链接。或者，打开“始终使用光标键在页面内导航”首选项，在页面中移动光标，然后查看链接是否会显示轮廓。

通常，此默认样式不是什么大问题。链接通常在加载新页面之前只处于活动状态几分之一秒，然后轮廓就会消失。但是，在某些情况下，您可能希望删除此轮廓。

请记住，此样式**实际上使用了“outline”CSS 属性**。Outline 与**“border“**属性非常相似，但有两个重要的区别。第一，outline 围绕整个对象（就像只使用“border”一样），但您可能无法指定具体哪一边。“Outline-left”不存在。第二，**outline 值不是盒子模型的一部分**。Border 会计算在盒子的总宽度中，而 outline 不会。这很重要，这样当应用和移除 outline 时，布局就不会发生偏移。

如何去除

如果您想将其去除，并且希望将其从每个锚链接中去除，只需将其作为 CSS 重置的一部分包含即可

a {
   outline: 0;
}

总的来说，我建议保持默认的 outline 样式处于活动状态，但在某些情况下，它确实会让人感到很烦人，应该将其关闭。例如，如果您有一个页面元素使用了大量的填充（例如用于定位）或浮动，这些轮廓可能会被放置在非常奇怪的位置，甚至会延伸到屏幕的整个宽度。看起来很糟糕。另一种情况是，如果您将锚链接的“点击”事件用于其他目的（例如，激活一些 JavaScript 魔法）。该点击将不再加载新页面，因此轮廓将变为活动状态并保持该状态，直到您在其他地方单击，这比您通常在点击链接时看到的快速且临时的视图更难看。

确保添加新的焦点样式

由于该轮廓提供了重要的辅助功能，因此您确实应该（非常）考虑为链接的焦点和活动状态添加回样式。就我个人而言，我只是想让它们与悬停状态相同。就实际功能而言，它们几乎是一样的。无论您的悬停状态是什么，即使它是在切换背景图像或更改大小或其他任何操作，它都可以与活动状态和焦点状态结合使用。如下所示

a:hover, a:active, a:focus {
  /* styling for any way a link is about to be used */
}

哇。我真的很想让这篇文章只有 3 句话长和 1 段代码。事情永远不像我想象的那样简单！

Flash

如果您在 Flash 对象/嵌入对象上遇到此虚线问题，您可以

object, embed { 
  outline: 0;
}

Firefox 输入框

点击input type=image可能会产生虚线轮廓（在 Firefox 3.6.8 中出现，但在 Firefox 4 中不出现）。要删除它

input::-moz-focus-inner { 
  border: 0; 
}

IE 9

George Langley 写信说，IE 9 似乎不允许您删除链接周围的虚线轮廓，除非您包含此元标记

<meta http-equiv="X-UA-Compatible" content="IE=9" />