logo标签列表

Respond.JS在IE 8中不起作用。

internet-explorercssinternet-explorer-8media-queriesrespond.js
35

由于某些原因，似乎响应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服务器上测试。

我有同样的问题，我尝试了两个测试页面，一个是通过respondjs仓库链接的：http://chrisjacob.github.com/Respond/ 和 http://scottjehl.github.com/Respond/test/test.html。这两个测试页面在IE8中都失败了，看起来这不起作用？（那些推出“移动优先时尚”的人没有考虑到这一点。） - Kev
6
好的，我会尽力进行翻译。以下是需要翻译的内容：ok forget what I said, it works actually. The problem was from a security option of IE8 that was activated on my dev computer. I think it prevents js execution. Maybe you have this too. It's in tools, internet options, security, security level (I unchecked "enable protected mode"). This also shows a very simple problem with this technique if js is not available.好的，实际上不用在意我之前说的话，它已经可以正常工作了。问题出在我的开发电脑上激活了IE8的一项安全选项，我想这会阻止js执行。也许你也有同样的问题。这个选项在工具菜单的Internet选项里，选择安全标签，然后调整安全级别（我取消了“启用保护模式”）。这也展示了一个非常简单的问题，就是如果没有js可用，这种技术无法使用。 - Kev
@Lynda .. 你解决了这个问题吗？..你有自己的解决方案吗？ - matzone
@matzone - 看看我刚刚发布的回答，解决了我的问题。 - L84
@Amida 我曾经遇到过同样的问题，禁用了安全选项后它就可以正常工作了。尽管如此，如果你必须禁用安全性，使用这个脚本还有什么意义呢？ - Xarcell
我刚刚意识到，将IE设置重置为默认值也会更好地解决问题。相比完全禁用安全性，这也是推荐的做法。 - Xarcell
20个回答
90
相同的问题。我发现是我的加载顺序有问题，因为我先写了内联CSS，然后调用respond.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(); ?>" /><!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]-->` 在body中： `<script src="/js/jquery-latest.min.js"></script><script src="/js/bootstrap.min.js"></script>` - Kaarel
@Kaarel Kont-Kontson 我没有尝试过，但你可以查看源代码以查看CSS和JS是否已加载。你是否加载了respond.js？ - Wen
这对我有用。我把脚本放在所有其他脚本和链接的顶部，现在我把它移到底部，嘭，它就可以工作了。 - postelrich
13

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

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

1
值得一提的是，有关在CDN上设置respond.js的说明可以在其Github页面上找到：https://github.com/scottjehl/Respond#cdnx-domain-setup - Sean Adkinson
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的答案，因为respond.js应该放在CSS之后。在我的情况下，它放在CSS之后，但由于某种原因，在中它无法正常工作。将其插入后，它就能如预期般工作。
2
谢谢，这给了我解决问题的线索。我最初声明了我的<script>标签（包括Respond.js），然后是我的<style>标签。将它们的顺序颠倒过来就解决了问题（这与它是否在<body>中无关，只是顺序很重要）。 - Jeremy Visser
我没有对此进行投票，但可能是因为您没有给出解释，因此很难确定您的解决方案何时适用。此外，如果您已经查看了Wen的答案，您会发现它无法正常工作的原因是respond.js必须在包含@media查询的CSS之后。只要确保它在样式表之后，您可以将脚本标签放回头部。否则，人们会给出负面评价来表示该答案不应使用或没有提供价值。希望我的解释有所帮助。 - Mikezx6r
1
@Mikezx6r - 当人们不留言就给我点踩时，我真的很烦。如果有人对问题/答案进行了点踩，他们应该说出原因，这样才能改进问题/答案。顺便说一下：在我的情况下，respond.js确实是在CSS之后。我编辑了问题/答案以反映这一点。由于某些原因，它在我的情况下无法在头部工作。自从这个问题出现后，我已经开始使用Zurb的Foundation并放弃了IE 8支持。 - L84
@Lynda - 没关系，Lynda。我们这样做的原因是帮助人们解决问题并节省时间。你能否将我的回答标记为正确答案？这样，人们就可以轻松找到正确答案，不会再给您投反对票了。 - Wen
@Lynda，你检查源代码时确定它是在head中的css之后加载的吗？我现在正在使用一个框架，它使用jsps生成head的内容，因此总会在关闭head标签之前加载一些额外的css，所以我可能也必须选择body选项（尽管我想避免这样做）。 - br3w5
只是补充一下，我的加载顺序在头部是正确的，但它并不起作用，将其移到body中可以工作，这很让人恼火，因为我想尝试保持我的所有脚本捆绑在一起。猜测条件注释应该有助于防止其他浏览器甚至要求它。 - EJanuszewski
7

Respond.JS是Bootstrap用于在Internet Explorer 8中启用媒体查询的工具，但不会处理@import文件。

来自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";
1
我曾经遇到过类似的问题，即respond.js无法与WordPress主题一起使用，因为它使用@import来包含CSS。我找到了这个页面（http://davekiss.com/ie8-respond-js-and-wordpress/），上面提到不要这样做，并确保使用`<link>`标签。 - Dan Dyer
Respond.js在README中指出，它无法处理通过@import引入的文件，而Bootstrap使用Respond.js为IE8启用媒体查询。我希望我最近读过这个，今天追踪这个问题就可以省些时间了。 - LocalPCGuy
3
请确保您使用的是本地主机或Web服务器。 "由于安全限制，某些浏览器可能不允许在file:// urls上运行此脚本（因为它使用XMLHttpRequest）。请在Web服务器上运行它。"
来源：https://github.com/scottjehl/Respond
如果你读了我问题的最后一句话，你会发现我正在一个实时的网络服务器上进行测试，然而这对其他人可能也有用。 - L84
我遇到了这个问题，这对我来说是解决方案。我希望它能帮助其他人。我也使用了css3-mediaqueries.js。 - Peter_B.
我必须同意，它可以在本地主机或Web服务器上运行。我尝试了论坛中提供的所有可能的respond.js解决方案，但都没有奏效，只有在本地主机上才能使其正常工作。 - whyAto8
2
如果您正在尝试使用Internet Explorer 11来模拟早期版本的Internet Explorer，请注意。 Internet Explorer 10及更高版本不支持IE条件注释。即使在仿真模式下以早期版本运行，Internet Explorer 11的第一个版本也不支持它们。请参见不再支持条件注释（MSDN）。
您应该确认您至少有Internet Explorer 11的第一个更新。如有疑问，请获取最新版本。
请参见通过F12开发人员工具仿真文档模式时，条件注释无法工作的错误修复。
在Stack Overflow的讨论中，有一个问题是关于Internet Explorer 11即使模拟Internet Explorer 8文档模式，为什么不遵守条件注释的问题？ Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?。
2
最佳实践是包括html5shiv.js和respond.js，并确保在本地主机上运行，这样它就可以正常工作。
<!--[if lt IE 9]>

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

<![endif]-->

我希望这能对你有所帮助。

1
我只是想补充一下，来自github的example.html在XP上的IE8中不能直接使用！
我发现当我将github的示例复制到我的服务器时，它无法正常工作。我找到的解决方案是：在使用XP上的IE8测试示例时需要进行2个更改！
1.下载并提取https://github.com/scottjehl/Respond的内容。
2.打开cross-domain文件夹中的example.html，将“rawgithub.com”替换为“rawgit.com”（IE8/xp不喜欢包含css文件时的重定向）。
3.将“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>
1
这个错误是因为脚本"respond.min.js"使用了Ajax或类似的东西。你必须将你的项目放在本地或远程服务器上，如WAMP或XAMPP。
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>

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接