css - Bootstrap 示例页面未在选项卡上显示焦点轮廓。如何获得这种行为

Question

当我在这里访问 Bootstrap 示例页面时:http://getbootstrap.com/javascript/#tabs

我可以单击选项卡，但不会出现蓝色焦点轮廓(chrome)。这是我想要的行为。我的应用程序中的相同交互(单击选项卡)显示蓝色轮廓。

我知道这个问题有几个简单的修复(Bootstrap's Togglable Tabs - Removing outline / focus ?)(将 css 更改为 outline: 0 for anchors)，但我不明白的是为什么 Bootstrap 示例有效(在之后不概述)点击)而我的没有。当我在开发工具中选择标签 anchor 标记时，这是我看到应用的 css:

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:active, a:hover {
outline: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
a {
background-color: transparent;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
user agent stylesheet:focus {
outline: -webkit-focus-ring-color auto 5px;
}

特别有趣的是，'a:focus' 指定了轮廓属性，但在单击选项卡后我没有看到轮廓。我还验证了 anchor 已设置为焦点。如果我使用 Chrome 开发工具中的“切换元素状态”功能并选中“焦点”，则会出现蓝色轮廓。

应用于我的应用程序 Bootstrap 选项卡的样式是相同的，但我在单击该选项卡后看到了蓝色轮廓。

Answer 1

我也遇到了同样的问题。奇怪的是它只发生在某些浏览器上。我在 Chrome 或 Safari 上没有遇到这个问题，但在 Firefox 和 IE11 上却出现了。这对我有用。

.navbar-default .navbar-nav>li>a {
  outline: none;
}