Question

我已经搜索了一段时间，发现有些人让它工作，但没有一个提供任何代码示例。

我尝试了他们的建议，但它对我不起作用。根据建议，我尝试添加<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>

Answer 1

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

根据this question和this question，您需要使用css3-mediaqueries-js或Respond等扩展程序。

Answer 2

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

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

必须在＆lt; body＆gt;之前包含它元素（即在＆lt; head＆gt;中）

Answer 3

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

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

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

有关演示的信息，请参阅跨域/ 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没有附加查询字符串。

Answer 4

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

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

使用Respond.js Module安装Respond.js文件。
禁用任何CDN以加载Bootstrap文件。
使用Bootstrap Library Module在本地安装Bootstrap文件。
在/admin/config/development/performance

Answer 5

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

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

如果假设我们的客户要求不考虑在IE8＆lt;中查看网站，那么我们就开始实施bootstrap或zurb基础RWD功能

Answer 6

这是我一直致力于解决Bones框架的解决方案。它可以很容易地与bootstrap一起使用。

https://github.com/gamsim/ieresponsify

Answer 7

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

只需添加 respond.js 或 respond.min.js ，必须在 response.proxy之前添加。 js 以使设置正常工作。

Answer 8

在所有样式表“link”标签之后和头标签关闭（）之前尝试或遵循此操作，它意味着在“head”标签内的末尾。这种格式在所有网站中都有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]-->

Answer 9

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

Answer 10

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

当谈到ipad时，通过bootstrap使用的css代码不是来自媒体查询，它只是一个普通的css代码，没有在媒体查询中声明。它是固定宽度，你必须使用ie7＆amp; 8.（如果你想使用bootsrap，请先考虑一下。）

将来（或现在）当有一个新的小工具不支持引导程序时。您的客户可能会回去修复该问题。

我们都知道ie7＆amp; 8仍然存在，所以它应该也适用于这两个旧的浏览器。

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

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

如何使IE8上的Bootstrap响应式布局工作

10 个答案: