Bootstrap 导航菜单下拉菜单在 IE11 中显示 transparent/pink

Question

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

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

标记非常简单：

<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 */
}

Bootstrap 导航菜单下拉菜单在 IE11 中显示 transparent/pink

Bootstrap Nav Menu dropdown shows transparent/pink in IE11

html

css

transparency

twitter-bootstrap

internet-explorer-11