Bootstrap Grid IE 8 兼容性答案

【问题标题】：Bootstrap Grid IE 8 compatibilityBootstrap Grid IE 8 兼容性
【发布时间】：2015-09-17 22:19:07
【问题描述】：

我正在使用 bootstrap 3，因为我被告知它与 Explorer 8 兼容。我之前使用的是 Foundation。

但我正在尝试让引导网格在 Explorer 上运行但没有成功。

当我在 Firefox 上使用网格时，它很简单。您使用带有类行的 div 和放置类 col-md-* 的子 div。

这适用于 Firefox，但在 Explorer 8 上它只是将 div 嵌套在彼此之上。

我设法使它在 Firefox 和 Explorer 8 上使用了 col-xs-*。但是，当我更改窗口的大小以模拟它在移动设备上的显示方式时，它只会拉伸 div，而不是像预期的那样将它们堆叠在一起。

现在我有一个难题。 Col-xs 在 Explorer 上工作，但它没有响应。 Cols-md 适用于除 Explorer 8 以外的所有设备。

这是我的测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="col-md-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="col-md-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

以上代码适用于 Firefox，但不适用于 Explorer 8。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="cols-xs-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="cols-xs-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

此代码适用于资源管理器，但无响应。

【问题讨论】：

在我的 IE8 标准下看起来非常好。
但这不是我想要的，正如您在“期望的结果”图像中看到的那样。

标签： html css twitter-bootstrap internet-explorer responsive-design

【解决方案1】：

我在这篇帖子的 cmets 上找到了答案：

http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9

对我们来说，这是通过确保在 css 之后加载 Respond js 来解决的。

我还将 col-xs 更改为 col-sm，现在它可以在 Firefox 和 Explorer 8 上运行，即使在 1024x768 分辨率下也是如此。

【讨论】：

对respond.js 的需求也包含在 Bootstrap 站点的“入门”页面中，以及其他 IE8 限制。 getbootstrap.com/getting-started/#support-browsers
是的，但是由于某种原因，如果您将 respond.js 放在 css 之前，它就不起作用了。
啊，是的。 JS 在文件加载后立即执行，respond.js 会扫描您的样式表以装配各种技巧，使其看起来像媒体查询在 IE8 中工作。如果在 .css 之前加载 .js，那么在执行 respond.js 时就没有要扫描的样式。
添加这个来自joostrap.com/blog/…的技巧非常有用，谢谢：.container { display:table;宽度：100%； } .row { 高度：100%;显示：表格行； } .col-sm-4 { 显示：表格单元； }

【解决方案2】：

我没有看到您的文档头部有视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

更多详情请见http://getbootstrap.com/css/#overview-mobile。

【讨论】：

你是对的，但这不是问题的根源。