html - 用于 IE 的 Bootstrap 按钮 CSS

Question

在 IE 中我遇到了一个小错误。当我点击我的按钮时，它会这样做:

哪个是正确的，当我将鼠标悬停在批准或用户管理器上时出现问题:

这个丑陋的盒子出现了，它真的很奇怪，因为它没有出现在 Chrome 中。这是我的 CSS:

 .dropdown-menu {
     margin-left: 55px;



}

.btn{
     background: none;
     border: none;
     font-size: 17.5px;
     font-weight:bold;      
     width: 120px;
     color: white;    


}

.btn:hover{
   background: none; 
   color: black;
   border: none;
}



.btn:after{
   background: none; 
   color: black;
   border: none;
}

.btn:active{
   background: none;
}

.btn:active:focus{
    background: none;
}

.btn.active:focus, .btn.active:focus, .btn.active:hover, .btn:active.focus, .btn:active:focus, .btn:active:hover, .open>.dropdown-toggle.btn.focus, .open>.dropdown-toggle.btn:focus, .open>.dropdown-toggle.btn:hover, .close>.dropdown-menu.btn:hover, .close>.dropdown-toggle.btn.focus, .close>.dropdown-toggle.btn:focus{
   background: none; 
   color: black;
   border: none;
   outline: none !important;
}

.dropdown{
    position: relative;
    top: -60px;
    left: 900px;
}

还有我的 HTML:

    <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  Dropdown
 <span class="caret"></span>
 </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li> @Html.ActionLink("Approve", "Approve", "Admin")</li>
<li>@Html.ActionLink("User Mananger", "UserManager", "Admin")</li>                                          
  </ul>
 </div>

Answer 1

您的 CSS 引用的按钮不是问题所在。问题出在 ul 正下方的 li 中。回答:您没有任何 CSS 来处理 li 的背景颜色(悬停时)。

像这样的东西应该可以工作:

li:hover { 
    background-color:#000000; 
}