Chrome：焦点移除后，链接上的部分轮廓仍然存在（当轮廓样式明确为“自动”时）答案

【问题标题】：Chrome: Parts of outline on links remain after focus removed (when outline-style is explicitly to "auto")Chrome：焦点移除后，链接上的部分轮廓仍然存在（当轮廓样式明确为“自动”时）
【发布时间】：2013-06-17 18:52:24
【问题描述】：

对此可能没有直接的解决方案，但欢迎任何有关解决方法的建议或指向此问题/行为的某些文档的指针。

场景：如果我应用自定义焦点 CSS 样式，例如：

:focus {outline: 2px auto green; }

问题：即使焦点移开后，部分大纲仍会显示在先前活动的链接上。

在屏幕截图中，最后一个带有绿色轮廓的链接是当前活动的元素。周围带有小绿线的其余链接仅在以前处于活动状态。

这些剩余的轮廓部分会在几秒钟后自行消失，或者当您将鼠标拖到它们上方时（或以其他方式干扰页面的该区域）。

上下文：我正在开发可访问性的 chrome 扩展，我需要为活动元素设置显式样式。我希望使用 outline-style:auto 的原因是 1）应用除 auto 之外的任何其他样式（如“solid”、“dotted”等）给 another issue 和 2）也看起来更好。

我知道其他浏览器不支持outline-style:auto。

使用 Chrome 27。

【问题讨论】：

类似的行为，但对于 IE9：stackoverflow.com/questions/14387672/…
我可能最终会应用 outline-style:solid 什么的，但我希望我可以使用“auto”，原因是上面提到的。

标签： html css google-chrome outline

【解决方案1】：

您可以检查是否设置了轮廓偏移。

我遇到了类似的问题，我正在使用 Bootstrap，它正在设置：

a:focus {outline-offset: -2px;}

听起来您使用的不是 Bootstrap，但您可能正在发生类似的事情。我把它改回默认值：

a:focus {outline-offset: 0px;}

这似乎对我有用。希望这会有所帮助！

（警告，IE 不支持轮廓偏移：http://www.w3schools.com/cssref/css3_pr_outline-offset.asp）

【讨论】：

【解决方案2】：

我有同样的问题。就我而言，我设置了轮廓和框阴影。两者似乎都坚持元素。

添加轮廓时，我还将框位置设置为“相对”以使其突出。出于某种我无法解释的原因，当我将位置设置为相对时，将框的 z-index 设为 1（将其向前）完全为我解决了这个问题。

【讨论】：