恢复Chrome/Safari/Firefox/IE8+所有焦点项目的轮廓

Question

我们正在使用一些JavaScript库，其中包括可怕的:focus {outline: none;}。我不想弄乱库，因为下次升级库时，我的代码将丢失。

例如(唉，不是唯一这样的库)，FlexSlider有以下代码:

.flex-container a:hover, 
.flex-slider a:hover, 
.flex-container a:focus, 
.flex-slider a:focus  
  { outline: none; } 

我看到在输入字段上有一个post Restore Webkit的CSS大纲，我们实际上使用了那个代码。

:focus 
  { outline: auto 5px -webkit-focus-ring-color; }

然而，这使得我们的Firefox和IE访问者没有轮廓。如何在CSS文件中进行跨浏览器的大纲恢复?

我想我可以使用jQuery来删除有问题的规则，但是如果他们改变了他们的库，那就会被打破，并且不会帮助那些禁用JavaScript的访问者。

我还在想我可以做:

*:focus
  { outline: inherit !important; }

，但我想知道是否会有意想不到的后果，因为在浏览器中，不同的标签有不同的轮廓样式。

您可以在深绿色区域右侧的滑块中看到旧金山市政交通局主页上的这一操作。

Answer 1

在Bootstrap中找到

a:focus { 
  outline: thin dotted; 
  outline: 5px auto -webkit-focus-ring-color; 
  outline-offset: -2px; 
}

不确定轮廓偏移量;这可能是文体上的决定。