Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="top">
  <ul class="nav nav-pills">
    <li class="active"><a href="index.php"><i class="icon-white"></i>Home </a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class=""></i>
                Apartments<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href='acacia.php'><span>Acacia</span></a></li>
        <li><a href='bluebell.php'><span>Bluebell</span></a></li>
        <li><a href='rose.php'><span>Rose</span></a></li>
        <li><a href='orchid.php'><span>Orchid</span></a></li>
        <li class='last'><a href='waratah.php'><span>Waratah</span></a></li>
      </ul>
    </li>
    <li><a href="map.php"><i  class="icon-white"></i>Location & Environment</a></li>
    <li><a href="plans.php"><i class="icon-white"></i>Plans  & Layouts</a></li>
    <li><a href="aboutus.php"><i class="icon-white"></i>Developers</a></li>
    <li><a href="interior.php"><i  class="icon-white"></i>Interior</a></li>
    <li><a href="contactus.php"><i  class="icon-white"></i>Contact Us</a></li>
  </ul>
</div>

我使用此代码创建了一个水平顶部导航栏，它在我的localhost中适用于IE，Firefox，Chrome。当我将它上传到免费托管服务器时，它无法在IE中运行。水平导航栏正在分解并成为垂直导航栏。它正确地在其他浏览器上工作。

Answer 1

您可以使用JS来修复IE8-。像这样：

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Answer 2

如果您使用的是bootstrap 3，则它不支持低于版本8。使用bootstrap时要记住几点，并避免在ie：

中出现故障

1＆GT;检查是否没有任何未标记的html标签或div。

2 - ;添加respond.js以便在IE中使用媒体查询。

3＆GT;如果您使用的是html5标签，请添加html5shiv。

Bootstrap水平导航栏在Internet Explorer中崩溃

2 个答案: