Bootstrap Nav Menu 下拉菜单在 IE11 中显示透明/粉红色答案

【问题标题】：Bootstrap Nav Menu dropdown shows transparent/pink in IE11Bootstrap Nav Menu 下拉菜单在 IE11 中显示透明/粉红色
【发布时间】：2015-07-15 14:19:57
【问题描述】：

我在使用 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

有时粉红色会丢失，但透明度问题仍然存在：

【问题讨论】：

你们有自定义样式吗？因为我在 jsfiddle 中没有看到问题。
我可以在 IE11 Windows 8 上使用那个小提琴来复制问题
我无法在您的小提琴中重现该问题。您采取了哪些特定步骤来触发问题？
这就是我在IE11 win7上看到的dl.dropboxusercontent.com/u/32989095/screenshots/ie11-win7.JPG
尝试将鼠标悬停在菜单项上。有时它不透明（但仍然是粉红色），有时当悬停移动到另一个项目时下拉项目保持突出显示。该问题仅出现在页面文本上方的菜单项上

标签： html css twitter-bootstrap transparency internet-explorer-11

【解决方案1】：

当anchor 标签位于well 内部或上方时，我发现这是一个问题。

在 IE 中，box-shadow 干扰了背景颜色。

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

Fiddle with fix

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

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

【讨论】：