Question

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

方案：如果我应用自定义的焦点CSS样式，例如：

:focus {outline: 2px auto green; }

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

在屏幕截图中，绿色轮廓的最后一个链接是当前活动的元素。其余带有小绿线的链接仅在之前有效。

enter image description here

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

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

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

使用Chrome 27.

Answer 1

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

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

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

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

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

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

Answer 2

我有同样的问题。在我的例子中，我设置了轮廓和框阴影。两者似乎都坚持这个元素。

当我添加轮廓时，我还将框位置设置为＆＃34; relative＆＃34;使它脱颖而出。出于某种原因，我无法解释，当我将该位置设置为相对时，为该框提供z-index为1（将其向前推进）为我完全解决了这个问题。