我在这里有这个导航:

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><h1 class="logo"></h1></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <span style="color:#FFF; font-style:italic; line-height:66px; padding-right: 10px; font-size:12px; float:left;">In The Heart Of Niagara's Historic Wine Country</span>
            <ul class="nav navbar-nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="rooms.html">Rooms</a></li>
              <li><a href="amenities.html">Amenities</a></li>
              <li><a href="dining.html">Breakfast and Dining</a></li>
              <li><a href="region.html">Discover Our Region</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>


这在Chrome上看起来不错,除IE 11之外,几乎所有地方都很好

这是Chrome中的外观:

html - CSS Navigation Bootstrap问题-LMLPHP

这就是IE 11中的样子

html - CSS Navigation Bootstrap问题-LMLPHP

我的问题是,我无法在IE 11中重现此问题,但我的客户IE 11看起来像第二张图片。我怎样才能解决这个问题?

这是CSS:

.navbar-nav {
    float: left;
    margin: 0;
    height: 70px;
}

.navbar-nav>li {
    float: left;
    height: 70px;
}

最佳答案

检查文件是否遵循html5结构。


<!DOCTYPE html>-非常关键,当前的最佳实践是在HTML文档类型的第一行中。
HTML5Shiv-在Internet Explorer版本中启用HTML5元素的样式。
Bootstrap版本-请确保您使用的是最新版本的框架。
兼容模式IE11-如果您正在运行兼容模式,请将其关闭。

关于html - CSS Navigation Bootstrap问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36684498/

10-10 14:18
查看更多