Html 为什么列表中的第一个元素会高亮显示？

我使用Bootstrap在我的Chrome扩展中生成导航栏，但是出于某种原因，它一直高亮显示第一个元素，我不知道为什么。除了默认引导CSS之外，没有其他CSS

我的代码

<ul class="nav">  
  <li><a id="btnHome" href="#" title="Home"><img src="img/bk.png"/></a></li> 
  <li class="current"><a href="popup.html" title="Notifications"><i class="icon-bell current"></i></a></li>
  <li><a href="spaces.html" title="Spaces" ><i class="icon-th-list"></i></a></li>
  <li><a href="options.html" target="_blank" title="Options" ><i class="icon-wrench "></i></a></li>
</ul> 

我的结果

有人有什么建议吗

JSFIDLE

---

根据JSFIDLE，在正常浏览中似乎不会发生这种情况。它只在OSX上的Chrome上进行了测试。这是一个扩展，所以不确定它是否有任何影响。

添加

大纲：无到您的
。当前的
类工作正常：

.current {
    border-bottom: 1px #0d6fac solid;
    outline: none;
}

或者，在
ul.nav
上试用：

ul.nav a {
    outline: none;
}

请参阅此更新。
添加
大纲：无到您的
。当前的
类工作正常：

.current {
    border-bottom: 1px #0d6fac solid;
    outline: none;
}

或者，在
ul.nav
上试用：

ul.nav a {
    outline: none;
}

查看此更新。
图像周围是否有默认边框？是否检查图像是否高亮显示？是的，这可能是图像文件中的边框。
outline:none应该达到你想要的。只是在Chrome扩展中？看起来它只是突出显示键盘可访问性的第一个选项。。。尝试
tabindex=“-1”
或只设置
outline:none图像周围是否有默认边框？检查图像是否突出显示？是的，这可能是图像文件中的边框。
轮廓：无应该达到你想要的。只是在Chrome扩展中？看起来它只是突出显示键盘可访问性的第一个选项。。。尝试
tabindex=“-1”
或只设置
outline:none