如何使 Bootstrap 响应式布局在 IE8 上工作答案

【问题标题】：How to make Bootstrap responsive layout work on IE8如何使 Bootstrap 响应式布局在 IE8 上工作
【发布时间】：2012-12-05 03:48:42
【问题描述】：

我已经搜索了一段时间，发现有些人成功了，但没有人提供任何代码示例。

我尝试了他们的建议，但对我没有用。根据建议，我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />、respond.js 或css3-mediaqueries-js，但都没有帮助。

这是一个jsfiddle，如果您使用IE8 查看它，无论您的浏览器宽度如何，您都会看到a 和b 在同一行。

但如果您使用 Chrome、FF 或 IE9 或更高版本查看，您会看到它们在不同的行或单行上，具体取决于浏览器的宽度。

更新

我尝试一次取消注释其中一个（css3-mediaquery、html5shiv 和响应），但其中任何一个都没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

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

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>

【问题讨论】：

我一直使用 Html 5 元素，然后使用 html5shiv.js
@Richlewis，感谢您的回复。我添加了 html5shiv.js 但仍然没有运气。也许我的其他代码有冲突？但是代码太少了。
问题是实际上有多少人在使用 IE6 到 IE8 的小宽度浏览器。我想的不多，也许我错了。
我不知道您是否可以做出这种假设。许多公司仍在使用 XP 作为他们的操作系统。
@uer2588853 问题是，如果您使用响应式引导程序，如果您使用

标签： twitter-bootstrap internet-explorer-8 responsive-design media-queries fluid-layout

【解决方案1】：

IE 8 不支持开箱即用的媒体查询。

基于this question 和this question，您将需要使用css3-mediaqueries-js 或Respond 之类的扩展名。

【讨论】：

@RayCheng reactivewebdesign.net 在 IE8 上使用 respond.js 和 html5shiv 进行媒体查询。也许看看源代码并尝试对其进行调整以适应您的需求。
知道了！我必须同时使用html5shive 和respond.js。
在 IE8 中查看我的网站后我吓坏了，但添加 respond.js 立即修复了所有问题（我已经在使用 html5shive）。哇！
嗨，如给定的，我尝试添加 respondjs、meta 标签、css3-mediaqueries、html5shiv 但在我的情况下似乎没有任何效果，容器类没有出现在 IE8 中。正在使用 bootstrap 3。你能帮忙吗？

【解决方案2】：

是的，它不支持 IE。我不是反引导程序，但我查看了引导程序框架的 css 代码。并发现，其他宽度没有定义为 %，我在其他博客文章中读到，您应该使用 % 作为宽度，这样它就会响应，这是真的。

当涉及到 ipad 时，引导程序使用的 css 代码不是来自媒体查询，它只是一个普通的 css 代码，没有在媒体查询中声明。它是固定宽度，您必须在 ie7 和 8 中使用。（如果您想使用 bootsrap，请先考虑一下。）

将来（或者现在）当有一个新的小工具不支持引导时。你的客户可能会回去解决这个问题。

我们都知道 ie7 和 8 仍然存在，所以它应该也可以在这两个旧浏览器上运行。

所以如果我是你，创建你自己的框架来满足你的站点/项目的所有要求。

但我不是反引导者，只是一个想法......因为我也在开发网站......

【讨论】：

我投了反对票，因为该建议在技术上不准确，解决方案也不实用。开发自己的框架？几乎总是有人已经把轮子做好了。现在值得花 20 个小时的研究，而不是以后必须修复其他解决方案已经解决的相同错误。另外：stackoverflow.com/questions/17523921/… 似乎也是一个解决方案。我并不是说这是刻薄或粗鲁，但您的回答完全是糟糕的建议。

【解决方案3】：

尝试使用html5shiv，它基本上是一个 HTML5 IE 启用脚本，应该可以在 IE 6,7 和 8 中启动引导程序。这也可以像这样直接热链接：

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

它必须包含在

元素之前（即在中）

【讨论】：

我不推荐热链接源代码。如果您想绝对确定您拥有正确（工作）版本的文件，只需将其存储在您自己的服务器上...
我同意@jaapz，热链接到 Google 代码不再是一个好主意，因为我相信他们正在关闭。如果您必须进行热链接，请使用公开的免费 CDN，例如 oss.maxcdn.com (oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js)

【解决方案4】：

是在 Internet Explorer 8 或更低的“容器”类宽度为 940 像素。但在 Internet Explorer9+、Firefox、Google Chrome 等中，'contianer' 类的宽度调用为 1170px。

Zurb 基金会也存在同样的问题。

如果假设我们的客户要求不考虑在 IE8 中查看的网站

【讨论】：

我使用.container { width: 100%; }，仅适用于 IE lt 8。

【解决方案5】：

这是我一直在研究的一个适用于 Bones 框架的解决方案。它可以很容易地与引导程序一起使用。

https://github.com/gamsim/ieresponsify

【讨论】：

【解决方案6】：

根据：https://drupal.org/node/2173441

要让您的 Bootstrap 站点在 IE8 上运行，您必须按照以下步骤操作：

使用 Respond.js Module 安装 Respond.js 文件。
禁用任何 CDN 以加载引导文件。
使用Bootstrap Library Module在本地安装引导文件。
在/admin/config/development/performance 中聚合和压缩 CSS 文件

【讨论】：

【解决方案7】：

您的问题是尝试将 respond.js 与外部域上的 CSS 样式表一起使用。 Respond.js 将修复 IE6-IE8 的媒体查询。

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js 通过 AJAX 请求 CSS 的原始副本来工作，因此如果您将样式表托管在 CDN（或子域）上，则需要上传代理页面以启用跨域通信。

查看 cross-domain/example.html 的演示：

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

如果您在跨域设置时遇到问题，请确保 respond-proxy.html 没有附加查询字符串。

【讨论】：

【解决方案8】：

@Akshay Raje 和 @Craig London 的建议解决了 IE 8 中的 CROSS DOMAIN css 加载问题。

只是为了添加它，respond.js 或 respond.min.js 必须添加 before respond.proxy。 js 让设置生效。

【讨论】：

【解决方案9】：

在所有样式表“链接”标签之后以及在头标签关闭（）之前尝试或遵循这一点，这意味着在“头”标签内的末尾。这种格式在所有网站中都有 99% 的工作。但是在某些drupal bootstrap 主题中不起作用。

记住全部保存在网站本地文件夹中，不要使用CDN。

 <!--[if lt IE 9]>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> 
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
 <![endif]-->

【讨论】：

【解决方案10】：

人们经常使用来自内容交付网络（CDN，如 oss.maxcdn.com 或 cdnjs.cloudflare.com）的媒体查询（引导程序和其他文件）加载 CSS。 Respond.js 不适用于外部加载的 CSS，因此您必须从服务器加载 Bootstrap CSS（或其他带有媒体查询的 CSS）。

【讨论】：