Respond.JS 在 IE 8 中不工作答案

【问题标题】：Respond.JS Not Working in IE 8Respond.JS 在 IE 8 中不工作
【发布时间】：2013-02-14 03:25:12
【问题描述】：

由于某种原因，响应 JS 似乎不起作用。我在 IE 8 中使用媒体查询来更改各种尺寸监视器的背景图像。在 IE 8 中没有背景，只有纯色。

代码如下所示：

<!--[if lt IE 9]>
 <script type="text/javascript" src="/js/html5-shiv.min.js"></script>
 <script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

媒体查询如下所示：

@media (min-width:769px) and (max-width:1366px){
 html, body{
   background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
   background-size:100% auto;
 }
}

上面的代码在 IE 8 中不能工作有什么原因吗？我应该尝试使用另一个 JS 来使 IE 8 媒体查询工作吗？

注意：似乎 html5-shiv 确实有效。我正在实时网络服务器上进行测试。

【问题讨论】：

我也有同样的问题，我试过两个测试页面，一个是通过respondjs repo链接的：chrisjacob.github.com/Respond和scottjehl.github.com/Respond/test/test.html。两个测试页面在 IE8 中都失败了，这似乎不起作用？？（推出“移动第一时尚”的家伙们没有想到这一点。）
好吧忘记我说的，它确实有效。问题来自在我的开发计算机上激活的 IE8 的安全选项。我认为它会阻止 js 执行。也许你也有这个。它位于工具、互联网选项、安全性、安全级别（我未选中“启用保护模式”）。如果 js 不可用，这也说明了这种技术的一个非常简单的问题。
@Lynda .. 你明白了吗？ ..你有自己的解决方案吗？
@matzone - 查看我刚刚发布的答案，解决了我的问题。
@Amida 我遇到了同样的问题，并且禁用了安全选项并开始工作。但是，如果您必须禁用安全性，那么使用该脚本有什么意义。

标签： internet-explorer css internet-explorer-8 media-queries respond.js

【解决方案1】：

同样的问题。我发现这是我的加载顺序问题，因为我内联编写了 CSS，然后我调用了响应 js 脚本，所以它看起来像

<script type="text/javascript" src="js/respond.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

应该是

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

始终在 js 脚本之前链接样式表或编写内联 CSS！

【讨论】：

这是否也适用于 IE11 开发者模式-> 文档模式 = 8 ？我无法让它在那里工作。在 head 我有：<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />  在 body：<script src="/js/jquery-latest.min.js"></script> <script src="/js/bootstrap.min.js"></script>
@Kaarel Kont-Kontson 我没有尝试过，但您可以查看源代码以查看是否加载了 CSS 和 JS。你加载了 respond.js 吗？
这对我有用。我将脚本放在所有其他脚本和链接的顶部。我把它移到了底部，砰，它起作用了。

【解决方案2】：

这可能是因为您将 CSS 托管在子域或 CDN 上。

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

【讨论】：

值得一提的是，可以在他们的 github 页面上找到使用 CDN 设置 respond.js 的说明：github.com/scottjehl/Respond#cdnx-domain-setup

【解决方案3】：

我能够完成这项工作，但我必须在body 标记中插入脚本。

<head>
    <!-- Code -->
</head>
<body> 
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Site Code -->
</body>

我不确定为什么会这样，但它解决了我的问题。

请注意：请参阅 Wen's answer，因为 respond.js 应该在您的 CSS 之后。在我的情况下，它是在 CSS 之后，但由于某种原因它在 head 中不起作用。当插入body 时，它按预期工作。

【讨论】：

谢谢——这给了我解决问题的线索。我首先声明了我的 <script> 标签（包括 Respond.js），然后是我的 <style> 标签。颠倒这个顺序可以修复它（它与它是否在<body> 中无关——只是顺序很重要）。
我没有对此投票，但可能是因为您没有给出解释，因此很难判断您的解决方案何时适用。此外，如果您查看了 Wen 的答案，您可以看到它不起作用的原因是因为 respond.js 必须位于包含 @media 查询的 css 之后。只要您确定它位于样式表之后，您就可以将脚本标记放回头部。投反对票是为了表明答案不是人们应该使用或不提供价值的答案。希望我的解释有所帮助。
@Mikezx6r - 当人们在没有评论的情况下投票而不管投票的原因是什么，这真的让我很烦恼。如果有人对问题/答案投了反对票，他们应该说明原因，以便改进问题/答案。仅供参考：在我的情况下，response.js 是在 CSS 之后。我编辑了问题/答案以反映这一点。由于某种原因，它在我的情况下无法正常工作。从这个问题开始，我开始使用 Zurb 的 Foundation 并放弃了 IE 8 支持。
@Lynda - 没关系，Lynda。我们这样做的原因是帮助人们解决问题并节省时间。你能把我的答案标记为正确答案吗？这样一来，人们就可以轻松找到正确的答案，而不会再给你投反对票了。
@Lynda 当您检查源代码时，它肯定是在头部的 css 之后加载的吗？我现在正在使用一个框架，它使用 jsps 生成头部的内容，所以总是在结束头部标记之前加载一些额外的 css，所以我可能也必须使用 body 选项（即使我想避免那）

【解决方案4】：

Respond.JS，Bootstrap 用于在 Internet Explorer 8 中启用媒体查询，does not process @import files。

来自 GitHub 存储库： Respond.js 不解析通过 @import 引用的 CSS，也不适用于样式元素中的媒体查询，因为这些样式不能被重新请求解析。

我必须在标题中加载 bootstrap.css 和任何包含媒体查询的 CSS

<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all' />
<link href='css/media.css' rel='stylesheet' type='text/css' media='all' />

以下导入方法不起作用：

@import "bootstrap.min.css";
@import "media.css";

【讨论】：

我有一个类似的问题，respond.js 不能使用 Wordpress 主题，因为它使用 @import 来包含 CSS。我发现这个页面 (davekiss.com/ie8-respond-js-and-wordpress) 提到不要这样做，并确保您使用 <link> 标签。
Respond.js 在 README 中指出，它不适用于通过 @import 引入的文件，并且 Bootstrap 使用 Respond.js 来启用 IE8 的媒体查询。我希望我最近读过这篇文章，今天可以节省我一些时间来追踪这个问题。

【解决方案5】：

确保您使用的是本地主机或网络服务器。 “由于安全限制，某些浏览器可能不允许此脚本在 file:// url 上运行（因为它使用 XMLHttpRequest）。在 Web 服务器上运行它。”

来源：https://github.com/scottjehl/Respond

【讨论】：

没错，如果您阅读我的问题的最后一句话，您会看到我正在实时网络服务器上进行测试，但是，这可能对其他人有用。
我遇到了这个问题，这就是我的解决方案。我希望它可以帮助别人。我也使用了 css3-mediaqueries.js。
我不得不同意，它在本地主机或 Web 服务器上运行。我尝试了论坛中给出的 response.js 的所有可能的东西，但没有任何效果，但 localhost 让它工作了。

【解决方案6】：

最佳实践是包含 html5shiv.js 和 respond.js 并确保在 localhost 中运行，这样它就可以正常工作了。

<!--[if lt IE 9]>

    <script src="js/html5shiv.js"> </script>
    <script src="js/respond.min.js"> </script>

<![endif]-->

希望对你有帮助。

【讨论】：

【解决方案7】：

如果您尝试使用 Internet Explorer 11 模拟早期版本的 Internet Explorer，请小心。

Internet Explorer 10 及更高版本不支持 IE 条件 cmets。即使在模拟模式下作为早期版本运行时，Internet Explorer 11 的第一个版本也不支持它们。请参阅 Conditional comments are no longer supported (MSDN)。

您应该确认您至少拥有 Internet Explorer 11 的第一次更新。如果有疑问，请获取最新的。

查看 Conditional comments do not work when emulating document modes via F12 Developer Tools

中的错误修复

还有 Stack Overflow 问题中的讨论Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?。

【讨论】：

【解决方案8】：

出现此错误是因为脚本“respond.min.js”使用了Ajax 或类似的东西。您必须将项目放在本地或远程服务器上，例如 WAMP 或 XAMPP。

【讨论】：

【解决方案9】：

我只是想补充一点，来自 github 的 example.html 不适用于 XP 上的 IE8！

我发现将 github 示例复制到我的服务器时不起作用。我找到的解决方案是，从XP用IE8测试的例子需要2处改动！

下载并提取https://github.com/scottjehl/Respond的内容
在跨域文件夹中打开 example.html 将“rawgithub.com”替换为 “rawgit.com”（IE8/xp 在包含 css 时不喜欢重定向文件）
将“https”更改为“http”，因为他们使用的 CDN 使用的 SNI 不是在 XP 中支持，所以如果你想支持 XP 用户，那么你需要迎合这个！（或者少一个你花很多钱得到一个 CDN 上的专用 IP）

一旦更改，所有示例都可以正常工作 :-) 希望这可以帮助某人 :-) 下面的工作 example.html 代码：

  <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
        <meta name=”viewport” content=”width=device-width, initial-scale=1?>
        <title>Respond JS Test Page</title>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
        <script src="../dest/respond.src.js"></script>
        <!-- Respond.js proxy on external server -->
        <link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
        <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
        <script src="respond.proxy.js"></script>
     </head>
     <body>
        <p>This is a visual test file for cross-domain proxy.</p>
        <p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
        <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
     </body>
  </html>

【讨论】：

【解决方案10】：

我通过更正以下行的顺序解决了这个问题；它们应该按以下顺序排列：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

我最后有 X-UA-Compatible 行，但列布局不起作用，除了我的本地。

【讨论】：

【解决方案11】：

您必须将样式表<link> 标记放在<head> 中。尽管所有浏览器都会加载和呈现链接到 <head> 之外的样式表，但它（曾经）违反规范，respond.js 不会处理它们。

【讨论】：

【解决方案12】：

也使用 polyfill.io？

如果这对其他人有帮助，我使用的是 polyfill.io 并在 beforerespond.js 之前加载它。我需要在 response.js 开始工作之后移动它，如下所示：

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>

【讨论】：

【解决方案13】：

我遇到了同样的问题，但是当我在我的项目中包含 Modernizr 时我解决了这个问题。

【讨论】：

【解决方案14】：

我在 Internet Explorer 条件下拥有以下链接。我不得不将这些脚本从条件中移除。

<!--[if lt IE 9]>    
    <script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
    <script type="text/javascript" src="~/Content/js/respond.min.js"></script>
<![endif]-->

替换为：

<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>

看起来条件的效果与将这些脚本包含在页脚而不是头部中的效果相同。

【讨论】：

【解决方案15】：

我一直在努力解决这个问题，终于找到了解决方案。我的问题是我们用来存储所有媒体的CDN。

我将 respond.js 和我的 CSS 文件都移到了同一个域中，一切都按预期工作。我希望这可以帮助处于类似困境的人。

【讨论】：

【解决方案16】：

Internet Explorer 8 及以下只能加载一定数量的 CSS 文件，并且它们只能有一定的最大行数。如果超过这些限制，CSS 将不会加载。尝试将 CSS 内容合并到一个文件中。

【讨论】：

不确定这是否是这里的问题。对于不知道这一点的其他人，您可以阅读IE's CSS Rule Limits Here。

【解决方案17】：

首先，html和html文件的css应该托管在同一个域中，最终可以工作！

其次，

<base target="_blank" />

应该写成

<base target="_blank"></base>

我已经尝试了上面提到的所有方法。我们可能会看到以下的演示 http://scottjehl.github.io/Respond/test/test.html 然后我尝试将css文件放在html文件的同一个域，然后发现它成功了。如果你把css放在html文件中，它也无法工作。

【讨论】：

【解决方案18】：

我遇到了同样的问题。花了这么多时间后，我意识到这是由 LESS 变量引起的。我覆盖了一个 Bootstrap 变量以关闭响应功能：

@grid-float-breakpoint: 0;

这就是破坏 respond.js 的东西。

然后我改成：

@grid-float-breakpoint: 0px;

现在它可以工作了。我希望它可以帮助某人。

【讨论】：

【解决方案19】：

就我而言，问题是其中一个 css 文件在服务器上不可用。 respond.js 在递归函数中处理 css 文件列表。第一次ajax 失败(req.status !== 200 && req.status !== 304)，它会默默地失败。我必须修复错误的 css 路径才能使其正常工作。

【讨论】：

【解决方案20】：

如果您通过 file://
查看页面，Respond.js 将不起作用将您的文件夹与服务器一起使用，然后它将起作用，例如http://localhost/yoursitename/。

【讨论】：

【解决方案21】：

我遇到了同样的问题，并通过删除<head> 中的<base> 标记解决了它。我在 Stack Overflow 问题 Respond.js not working in Internet Explorer 7, but H5BP example works 中找到了解决方案。它可能是由以下原因引起的：

<base />

而不是

<base></base>

Internet Explorer 6 - 8（我不确定 9）在没有结束标签时会抛出一个不稳定的问题。然后所有其他head 标记成为<base> 的子元素。一切都变得破碎了：/。

希望对你有帮助！

【讨论】：