Respond.JS在IE 8中不起作用

时间：2013-02-28 03:42:18

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

出于某种原因，似乎响应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确实有效。我正在测试一个实时Web服务器。

21 个答案:

答案 0 :(得分：90)

同样的问题。我发现它是我的加载序列问题，因为我编写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！

答案 1 :(得分：13)

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

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

答案 2 :(得分：8)

我能够完成这项工作，但我必须在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时，它按预期工作。

答案 3 :(得分：7)

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";

答案 4 :(得分：3)

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

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

答案 5 :(得分：2)

最佳做法是包含html5shiv.js和respond.js并确保在localhost中运行，因此它可以正常工作。

<!--[if lt IE 9]>

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

<![endif]-->

我希望它会对你有所帮助。

答案 6 :(得分：2)

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

Internet Explorer 10以后不支持IE条件评论。即使在仿真模式下作为早期版本运行，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? 。

答案 7 :(得分：1)

我只想补充一点，来自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>

答案 8 :(得分：1)

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

答案 9 :(得分：0)

您必须将样式表<link>标记放在<head>中。即使所有浏览器都会加载并呈现在<head>之外链接的样式表，但它与规范相关，respond.js也不会处理它们。

答案 10 :(得分：0)

如果您通过file：//
查看页面，则Respond.js无法正常工作 将您的文件夹与服务器一起使用，它将起作用，如http://localhost/yoursitename/。

答案 11 :(得分：0)

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

答案 12 :(得分：0)

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

@grid-float-breakpoint: 0;

这是破坏回应的事情.js。

然后我把它改为：

@grid-float-breakpoint: 0px;

现在它有效。我希望它对某人有所帮助。

答案 13 :(得分：0)

首先，html和html文件的css应该托管在同一个域中，最终会有效！

其次，

<base target="_blank" />

应该写成

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

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

答案 14 :(得分：0)

还使用 polyfill.io 吗？

如果这有助于其他任何人，我使用polyfill.io并在之前加载<。strong>。我需要移动它并且response.js开始工作，就像这样：

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

答案 15 :(得分：0)

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

答案 16 :(得分：0)

我一直在解决这个问题，最后想出了一个解决方案。我的问题是我们用来存储所有媒体的CDN。

我将respond.js和我的CSS文件全部放在同一个域中，一切都按预期工作。我希望这有助于处于类似困境的人。

答案 17 :(得分：0)

我在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>

看起来这种情况会产生相同的效果，就像在页脚而不是头部包含这些脚本一样。

答案 18 :(得分：0)

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

答案 19 :(得分：0)

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

<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系列，并且列布局不起作用，除了在我的本地。

答案 20 :(得分：-4)

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

<base />

而不是

<base></base>

Internet Explorer 6 - 8（我不确定9）当没有结束标记时会摇摆不定。然后，所有其他head标记都成为<base>的子元素。一切都破了：/。

我希望有所帮助！

相关问题
最新问题