鼠标悬停在按钮上的问题

Question

我使用的是Twitter Bootstrap，当我将鼠标悬停在btn-primary按钮上时，我有些奇怪的用法。

这是我的代码：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav nav-pills"> 
     <li class="active"> 
     <a href="#">Home</a> 
     </li> 
     <li><a href="#">...</a></li> 
     <li><a href="#">...</a></li> 
     <li><a href="#" class="btn btn-primary btn-small"> 
        <i class="icon-user icon-white"></i> Log In 
        </a> 
       </li> 
    </ul> 
    </div> 
    </div> 
</div> 

这是发生了什么：

悬停之前

---

任何想法，为什么这可能发生？

Answer 1

2解决方案，

• 简单：拆下立在href。 Pro：快速，无需维护。 Con：如果你需要下拉菜单，不能做到这一点，可以打破设计。
• 优先级：添加丢失的css类来支持li中的btn。

.navbar .nav > li > a.btn { 
display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; line-height: 18px; 
} 

.navbar .nav > li > a.btn-primary, 
.navbar .nav > li > a.btn-primary:hover { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
} 


.navbar .nav > li > a.btn-primary:active { 
    color: rgba(255, 255, 255, 0.75); 
} 

.navbar .nav > li > a..btn-primary { 
    background-color: #0074cc; 
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -o-linear-gradient(top, #0088cc, #0055cc); 
    background-image: linear-gradient(top, #0088cc, #0055cc); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc', GradientType=0); 
    border-color: #0055cC#0055cC#003580; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 
.navbar .nav > li > a.btn-primary:hover, 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.disabled, 
.navbar .nav > li > a.btn-primary[disabled] { 
    background-color: #0055cc; 
} 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.active { 
    background-color: #004099 \9; 
}