html - Why does the first element in the list get highlighted?

Question

I'm using Bootstrap to generate the navigation bar in my Chrome Extension, however for some reason, it keeps highlighting the first element and I'm not sure why. There is no CSS other than the default Bootstrap CSS

My code

<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> 

My results

Does anyone have any suggestions?

jsfiddle http://jsfiddle.net/b2LxH/

This doesn't seem to happen in normal browsing as per the jsfiddle. It have only tested this on Chrome on OSX. It's an extension so not sure if thats having any impact.

Answer 1

添加outline: none;到您的.current班级工作正常：

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

或者，在以下位置尝试ul.nav：

ul.nav a {
    outline: none;
}

请参阅此更新的 jsFiddle。