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

当我在这里访问引导示例页面时：

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

我知道有几个简单的方法（）可以解决这个问题（将css更改为outline:0作为锚点），但我不明白的是，为什么引导示例可以工作（单击后不会列出轮廓），而我的示例不能。当我在dev tools中选择tabs 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”指定了outline属性，但我在单击选项卡后没有看到outline。我还验证了锚点已设置为焦点。如果我在Chrome开发工具中使用“切换元素状态”功能并选中“焦点”，蓝色轮廓就会出现

---

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

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

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

---

你能为你的代码创建一个JSFIDLE吗？这里有一个JSFIDLE：（我没有创建这个，只是用谷歌搜索引导标签JSFIDLE）。这与引导示例相匹配。使用开发工具查看这种行为同样容易。我在引导网站上看到了演示，但既然你说它在你的网站上不起作用，我想看看你具体在做什么。因此，我请求修改你的代码。不幸的是，我无法直接共享这些代码。我似乎不能把它一分为二。不管我的代码如何，bootstrap示例在技术上应该在单击选项卡后显示蓝线；元素是聚焦的，该元素的css显示了一种样式，表明它将以蓝色勾勒出来。