Respond.js 在 ie8 及以下版本上使用 twitter 引导答案

【问题标题】：Respond.js with twitter bootstrap on ie8 and belowRespond.js 在 ie8 及以下版本上使用 twitter 引导
【发布时间】：2013-07-05 15:00:05
【问题描述】：

我正在使用 twitter bootstrap 实现一个响应式网站，但在 iexplorer 8 及更低版本上无法使用媒体查询。

我为 try respond.js 创建了一个简单的示例，但媒体查询在 iexplorer 7-8 上仍然无法正常工作，这是 html：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
  <h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>

这里是 style.css：

@media only screen and (max-width: 38.75em) {
body {
    background: green;
}
}

问候

【问题讨论】：

标签： internet-explorer-8 internet-explorer-7 respond.js

【解决方案1】：

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

CDN/X 域设置

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 没有附加查询字符串。

注意：非常感谢@doctyper 在跨域代理中的贡献！

【讨论】：

谢谢克雷格。这直接来自文档，但并不能真正解决问题。无法将 HTML 文件上传到 Bootstrap 的 CDN，所以你需要简单地抛弃 CDN 吗？
Simon，说实话，我还没有花时间解决这个问题。我知道这是可能的。在此期间，我只是将本地 CSS 用于 Bootstrap 和 CDN，以实现我不需要通过 response.js 进行调整的所有其他事情。如果您找到答案，请发布！ =)

【解决方案2】：

您需要在</head> 标记上方添加<script src="./js/respond.min.js"></script>。

【讨论】：

在之上和样式表之后
respond.js 应该可以工作，即使加载到 HTML 文档的底部，你只是更有可能得到一个 FOUC。我认为真正的问题是 respond.js 不会从其他域（例如 Bootstrap CDN）中提取样式表。

【解决方案3】：

如果您不想添加任何与respond.js相关的代码，请通过CDN加载bootstrap.min.css，IE 8除外。对于IE 8，请使用本地静态文件。

    <!--[if lte IE 8]>                                                      
        <link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
    <![endif]-->                                                            
    <!--[if gt IE 8]>                                         
        <link rel="stylesheet" href="{CDN Address}" />                                                      
    <![endif]-->                                              
    <!--[if !IE]><!-->                                        
        <link rel="stylesheet" href="{CDN Address}" />
    <!--<![endif]-->

在 IE 8 ~ 11 和其他 webkit 浏览器上测试。

【讨论】：