twitter-bootstrap 如何使 Bootstrap 响应式布局在 IE8 上工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13924493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap responsive layout work on IE8
提问by Ray Cheng
I've been search for a while and found some people got it working, but none of them provide any code samples.
我已经搜索了一段时间，发现有些人可以使用它，但没有人提供任何代码示例。
I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.jsor css3-mediaqueries-js, but none of them helped.
我尝试了他们的建议，但对我不起作用。根据建议，我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.jsor css3-mediaqueries-js，但都没有帮助。
Here's a jsfiddle, if you view it with IE8, you'll see both aand bare on the same row regardless of your browser width.
这是一个jsfiddle，如果您使用 IE8 查看它，无论您的浏览器宽度如何，您都会看到它们a并且b位于同一行。
But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.
但是，如果您使用 Chrome、FF 或 IE9 或更高版本查看，您将根据浏览器的宽度在不同的行或单行中看到它们。
UPDATE
更新
I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.
我试图一次取消注释其中一个（css3-mediaquery、html5shiv 和 response），但对其中任何一个都没有成功。
<!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>
回答by Jason Towne
IE 8 doesn't support media queries out of the box.
IE 8 不支持开箱即用的媒体查询。
Based on this questionand this question, you're going to want to use an extension like css3-mediaqueries-jsor Respond.
基于这个问题和这个问题，你会想要使用像css3-mediaqueries-js或Respond这样的扩展。
回答by Akshay Raje
Try using html5shiv, its basically a HTML5 IE enabling script and that should get bootstrap working in IE 6,7 and 8. This can also be directly hot linked like this:
尝试使用html5shiv，它基本上是一个 HTML5 IE 启用脚本，它应该让引导程序在 IE 6,7 和 8 中工作。这也可以像这样直接热链接：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
It must be included before the <body> element (i.e. in the <head>)
它必须包含在 <body> 元素之前（即在 <head> 中）
回答by Craig London
Your issue is trying to use respond.js with CSS stylesheets that are on external domains. Respond.js will fix media queries for IE6-IE8.
您的问题是尝试将 response.js 与外部域上的 CSS 样式表一起使用。Respond.js 将修复 IE6-IE8 的媒体查询。
https://github.com/scottjehl/Respond#cdnx-domain-setup
https://github.com/scottjehl/Respond#cdnx-domain-setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
Respond.js 的工作原理是通过 AJAX 请求 CSS 的原始副本，因此如果您将样式表托管在 CDN（或子域）上，则需要上传代理页面以启用跨域通信。
See cross-domain/example.html for a demo:
有关演示，请参阅跨域/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>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
如果您在跨域设置方面遇到问题，请确保 response-proxy.html 没有附加查询字符串。
回答by ohho
According to: https://drupal.org/node/2173441
根据：https: //drupal.org/node/2173441
To have your Bootstrap site working on IE8 you have to follow this steps:
要让您的 Bootstrap 站点在 IE8 上运行，您必须按照以下步骤操作：
- Install Respond.js files using Respond.js Module.
- Disable any CDN to load Bootstrap files.
- Install Bootstrap files locally using Bootstrap Library Module.
- Aggregate and compress CSS files in
/admin/config/development/performance
- 使用Respond.js Module安装 Respond.js 文件。
- 禁用任何 CDN 以加载 Bootstrap 文件。
- 使用Bootstrap 库模块在本地安装 Bootstrap 文件。
- 聚合和压缩 CSS 文件
/admin/config/development/performance
回答by Selva
Yes in Internet Explorer 8 or lower width of the class 'container' as 940px. But in Internet Explorer9+, Firefox, Google Chrome, etc., the width of the 'contianer' class is calling as 1170px.
是在 Internet Explorer 8 或更低的类“容器”的宽度为 940 像素。但是在 Internet Explorer9+、Firefox、Google Chrome 等中，'contianer' 类的宽度称为 1170px。
The same issue is also in Zurb Foundation.
Zurb 基金会也存在同样的问题。
If suppose our client requested to don't consider the website to view in IE8<, then we start to implement the bootstrap, or zurb foundation RWD feature
如果假设我们的客户要求不考虑在 IE8< 中查看网站，那么我们开始实施引导程序，或 zurb 基础 RWD 功能
回答by Simon Gamble
Here's a solution I've been working on that works with the Bones framework. It could be very easily used with bootstrap.
这是我一直在研究的一个适用于 Bones 框架的解决方案。它可以很容易地与引导程序一起使用。
回答by Prasoon Srivastava
The issue with CROSS DOMAIN css loads in IE 8 were resolved as suggested by @Akshay Rajeand @Craig London.
IE 8 中的 CROSS DOMAIN css 加载问题已按照@Akshay Raje和@Craig London 的建议解决。
Just to add to it, respond.jsor respond.min.jsmust be added beforerespond.proxy.jsfor the setup to work.
只是为了添加它，必须在respond.proxy.js之前添加respond.js或respond.min.js才能使设置工作。
回答by Ankur Saini
Try or follow this after all stylesheet "link" tag and just before head tag closed(),it means at the end inside the "head" tag.This format is 99% working in all websites. But in some drupal bootstrap theme does not work.
在所有样式表“链接”标签之后尝试或遵循此方法，就在头标签关闭（）之前，这意味着在“头”标签内的末尾。这种格式在所有网站中 99% 都有效。但是在某些 drupal bootstrap 主题中不起作用。
Remember save all in website local folder, Don't use CDN.
记住全部保存在网站本地文件夹中，不要使用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]-->
回答by TeeJay
Quite often people load CSS with media queries (bootstrap and other files) from a Content Delivery Networks (CDN, like oss.maxcdn.com or cdnjs.cloudflare.com). Respond.js doesn't work with externally loaded CSS, so you have to load your Bootstrap CSS (or other CSS with media queries) from your server.
人们经常从内容交付网络（CDN，如 oss.maxcdn.com 或 cdnjs.cloudflare.com）加载带有媒体查询（引导程序和其他文件）的 CSS 。Respond.js 不适用于外部加载的 CSS，因此您必须从服务器加载 Bootstrap CSS（或其他带有媒体查询的 CSS）。
回答by Melster
yeah it doesn't support IE. i am not anti bootstrap but, I review the css codes of bootstrap framework. and found out that, the other widths are not define as %, i read in other blog article that you should use % for the widths so it will responsive which is true.
是的，它不支持 IE。我不是反引导程序，但是，我查看了引导程序框架的 css 代码。并发现，其他宽度没有定义为 %，我在其他博客文章中读到你应该使用 % 作为宽度，这样它就会响应，这是真的。
and when it comes to ipad, the css code that is using for this by bootstrap is not came from media query, its just a normal css codes that was not declare inside of media queries. and it is fixed width which is you must use for ie7 & 8. (so think about it first if you want to use bootsrap.)
当涉及到 ipad 时，引导程序为此使用的 css 代码不是来自媒体查询，它只是一个普通的 css 代码，没有在媒体查询中声明。并且它是固定宽度，您必须在 ie7 和 8 中使用它。（所以如果您想使用 bootsrap，请先考虑一下。）
in future(or maybe now) when there is a new gadget that the bootstrap not supported. your client might go back to fix that issue.
将来（或者现在）当有一个引导程序不支持的新小工具时。您的客户可能会回去解决该问题。
we all know that the ie7 & 8 are still existing,so it should have worked on those two old browsers as well.
我们都知道 ie7 和 8 仍然存在，所以它应该也适用于这两个旧浏览器。
so if I were you, create your own framework to meet all the requirements of your site/project.
因此，如果我是您，请创建您自己的框架以满足您的站点/项目的所有要求。
but I am not an anti bootstrap, just a thoughts... because I'm developing sites too..
但我不是反引导，只是一个想法......因为我也在开发网站......
