35

For some reason it appears that respond JS isn't working. I am using Media Queries in IE 8 to change background images for various size monitors. In IE 8 there is no background, just a solid color.

The code looks like this: 

<!--[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]-->

The Media Query looks like this: 

@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;
 }
}

Is there a reason the above code would not work in IE 8? Is there another JS that I should try to use to make IE 8 Media Queries Work?

Note: It appears that the html5-shiv does work. I am testing on a live web server.

4

21 回答 21

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！

于 2013-05-30T03:47:36.827 回答
13

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

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

于 2014-01-01T10:53:55.007 回答
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 的回答，因为 response.js 应该在您的 CSS 之后。head在我的情况下，它是在 CSS 之后，但由于某种原因它无法正常工作。当插入body它时，它按预期工作。

于 2013-09-21T01:11:25.833 回答
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";
于 2014-01-19T10:45:23.087 回答
3

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

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

于 2013-08-20T20:46:28.503 回答
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 文档模式时也不支持条件注释？.

于 2014-11-02T23:24:05.563 回答
2

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

<!--[if lt IE 9]>

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

<![endif]-->

我希望它会帮助你。

于 2013-11-13T09:57:53.223 回答
1

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

于 2013-09-13T04:03:26.817 回答
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 使用 XP 不支持的 SNI，所以如果您想支持 XP 用户，那么您需要满足这一点！（或者更少你花很多钱在你的 CDN 上获得一个专用 IP）

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

  <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”&gt;
        <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>
于 2016-03-23T09:15:33.640 回答
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 行，但列布局不起作用，除了在我的本地。

于 2014-02-07T19:00:45.533 回答
0

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

其次，

<base target="_blank" />

应该写成

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

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

于 2015-02-28T07:37:45.007 回答
0

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

于 2014-10-14T05:59:04.253 回答
0

您必须将样式表<link>标签放在<head>. 即使所有浏览器都会加载和呈现链接<head>到respond.js.

于 2014-07-16T21:59:51.007 回答
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>

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

于 2014-09-08T19:58:18.150 回答
0

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

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

于 2014-09-11T17:40:00.740 回答
0

也使用polyfill.io？

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

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
于 2014-11-12T10:46:24.773 回答
0

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

于 2014-02-19T20:14:35.150 回答
0

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

@grid-float-breakpoint: 0;

这就是破坏 response.js 的原因。

然后我将其更改为：

@grid-float-breakpoint: 0px;

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

于 2015-04-16T07:24:02.340 回答
0

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

于 2015-07-08T08:51:19.023 回答
0

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

于 2015-08-07T08:31:03.313 回答
-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>. 一切都变得破碎了：/。

我希望这会有所帮助！

于 2013-06-15T04:39:08.623 回答