如何使 Bootstrap 响应式布局在 IE8 上工作
Posted
技术标签:
【中文标题】如何使 Bootstrap 响应式布局在 IE8 上工作【英文标题】：How to make Bootstrap responsive layout work on 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 问题是，如果您使用响应式引导程序，如果您使用 【参考方案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 个小时的研究，而不是以后必须修复其他解决方案已经解决的相同错误。另外：***.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）。
【讨论】：
以上是关于如何使 Bootstrap 响应式布局在 IE8 上工作的主要内容，如果未能解决你的问题，请参考以下文章