19

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

我尝试了他们的建议,但对我没有用。根据建议,我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />,respond.jscss3-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>
4

10 回答 10

31

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

基于这个问题这个问题,你会想要使用像css3-mediaqueries-jsRespond这样的扩展。

于 2012-12-18T17:21:47.933 回答
10

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

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

它必须包含在 <body> 元素之前(即在 <head> 中)

于 2013-04-25T19:07:42.070 回答
8

您的问题是尝试将 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 没有附加查询字符串。

于 2014-02-19T04:22:27.003 回答
4

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

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

  1. 使用Respond.js 模块安装 Respond.js 文件。
  2. 禁用任何 CDN 以加载引导文件。
  3. 使用Bootstrap Library Module在本地安装 Bootstrap 文件。
  4. 聚合和压缩 CSS 文件/admin/config/development/performance
于 2014-02-05T10:39:18.743 回答
2

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

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

如果假设我们的客户要求不考虑在 IE8< 中查看的网站,那么我们开始实现 bootstrap 或 zurb 基础 RWD 功能

于 2013-06-03T06:41:14.143 回答
2

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

https://github.com/gamsim/ieresponsify

于 2013-09-27T05:42:49.863 回答
1

在所有样式表“链接”标签之后尝试或遵循这个,就在头标签关闭()之前,它意味着在“头”标签内的末尾。这种格式在所有网站中都有效 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]-->
于 2014-10-27T10:53:06.037 回答
1

正如@Akshay Raje@Craig London所建议的那样,IE 8 中的 CROSS DOMAIN css 加载问题已得到解决。

只是为了添加它,必须在respond.proxy.js之前添加respond.jsrespond.min.js才能使设置正常工作。

于 2014-05-23T07:35:03.300 回答
1

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

于 2015-04-23T14:48:26.160 回答
-7

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.

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.)

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.

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..

于 2013-03-06T06:55:27.740 回答