IE11

Question

使用Bootstrap导航菜单时我遇到了一个奇怪的问题。在IE11上，菜单显示为粉红色背景或下面的半透明突出显示文本（在桌面上查看时，即中/大宽度）。

奇怪的是，这只发生在包含文本的井上方的下拉菜单项上（第一个菜单项表现正常）：

标记非常简单：

<nav class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Time and Attendance<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Time and Attendance System</a></li>
                <li><a href="#">Absence Management</a></li>
                <li><a href="#">Fire Roll Call</a></li>
                <li><a href="#">Flexitime</a></li>
                <li><a href="#">Link to Payroll</a></li>
                <li><a href="#">Bradford Factor</a></li>
                <li><a href="#">Access Control</a></li>
                <li><a href="#">Remote Workers</a></li>
                <li><a href="#">Reports</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Clocking in Options<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Clocking In Systems</a></li>
                <li><a href="#">Clocking In Machines</a></li>
                <li><a href="#">Fingerprint Clocking Machines</a></li>
                <li><a href="#">Hand Scanner Clocking Machines</a></li>
                <li><a href="#">Proximity Clocking Machines</a></li>
                <li><a href="#">Mobile Clocking</a></li>
                <li><a href="#">PC Based Clocking Software</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Job Costing<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Job Costing System</a></li>
                <li><a href="#">Job Costing Software</a></li>
                <li><a href="#">Job Costing Hardware</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Existing Customer Support</a></li>
                <li><a href="#">Remote Desktop Support</a></li>
                <li><a href="#">Clear User Code</a></li>
              </ul>
            </li>

            <li><a href="#contact">About Us</a></li>

            <li><a href="#contact">Contact Us</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>

JS Fiddle Here

有时粉红色缺失但透明度仍然存在：

Answer 1

当anchor标记位于well的顶部或顶部时，我将此跟踪为问题。

在IE中，盒子阴影干扰了背景颜色。

我为well添加了一个自定义规则，可以删除它，它似乎可以解决它。

Fiddle with fix

不确定是否有更优雅的解决方法？

.well{
    box-shadow:none; /* Fixes transparent hover issue on links with IE */
}