我在这里有这个导航:
<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中的外观:
这就是IE 11中的样子
我的问题是,我无法在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/