html - Chrome : Parts of outline on links remain after focus removed (when outline-style is explicitly to "auto")

Question

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

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

:focus {outline: 2px auto green; }

问题:即使在焦点移开后，部分轮廓仍会显示在先前事件的链接上。

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

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

上下文:我正在研究可访问性的 chrome 扩展，我需要为事件元素设置明确的样式。我希望使用 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;}

这似乎对我有用。希望这对您有所帮助!

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