Question

我有一个Bootstrap 3网格，旨在用于桌面设备，移动设备和平板设备。在最新版本的Firefox和IE 9+上一切正常，但它在IE 9以下的任何东西都失败了。失败的意思是网格系统甚至在台式机上显示移动版本。

脚本：

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

我的网格如下;我从div中删除了很多文本以便于阅读：

    <!--- BEGIN Mobile Navbar -->
  <header class="navbar navbar-static-top bs-docs-nav visible-xs" style="margin: -20px 0 15px 0;">
    <div class="col-xs-12" id="nav-mobile-outer" style="padding-right: 0px;padding-left: 0px;">
      <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
          <a href="../" class="navbar-brand" id="nav-mobile-header">Menu</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" id="nav-mobile-inner" role="navigation">
          <ul class="nav navbar-nav">
            <li>
              <a href="#" id="nav-mobile-link"><img src="images/arrow.gif" class="mobile-arrow">Orkney Demand & Generation</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!--- END Mobile Navbar -->

    <div class="col-md-4 col-sm-6" id="header-left"></div>

    <div class="col-md-3 visible-md visible-lg" id="sse-logo"></div>

    <!--- Begin Desktop & Tablet Navbar -->
    <nav class="col-md-4 col-sm-5 hidden-xs" id="nav-desktop-container">
    </nav>
    <!--- End Desktop & Tablet Navbar -->

    <div class="col-xs-12" style="height:30px;"><!--- Spacer --></div>

    <!--- Begin Desktop & Tablet Mid Section -->
    <div class="col-xs-12">
      <div class="col-md-4 col-sm-12" id="left-widget">
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6" id="right-widget" style="margin-bottom: 20px;"></div>
    <!--- End Desktop & Tablet Mid Section -->

    <div class="col-xs-12"><!--- Spacer --><br /></div>

  </div>

我尝试添加以下代码无济于事：

<!--[if lt IE 9]>
    <script src="bootstrap/respond/src/respond.js" type="text/javascript"></script>
    <script src="bootstrap/html5shiv/src/html5shiv.js" type="text/javascript"></script>
<![endif]-->

Answer 1

根据文件：

也支持Internet Explorer 8和9，但请注意，这些浏览器不完全支持某些CSS3属性和HTML5元素。此外，Internet Explorer 8需要使用Respond.js来启用媒体查询支持。

尝试使用IE条件将respond.js和html5shiv添加到您的头标记中：

<!--[if lt IE 9]>
 <script src="js/vendor/html5shiv.js"></script>';
 <script src="js/vendor/respond.min.js"></script>';
<![endif]-->

将元标记更改为：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 2

为什么不使用Modernizr？使用此方法，您可以使Ie8-IE7看起来像应该是桌面版本。我通常推荐这个，因为即使有respond.js，IE7-8也缺乏css3支持：

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>  <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

默认的bootstrap容器是这样的：

@media (min-width: 1200px)
.container {
width: 1170px;
}

使用Modernizr，您可以将它添加到顶部：

.ie-lt9 .container {width: 1170px;}

Bootstrap网格在IE 7和8中不起作用

2 个答案: