Respond.JS不是在IE 8的工作(Respond.JS Not Working in IE

2019-07-20 17:00发布

出于某种原因,似乎响应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的希夫做的工作。 我测试直播Web服务器上。

Answer 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!



Answer 2:

这可能是因为你在一个子域或托管你的CSS CDN 。

Respond.js会请求通过你的CSS的一个副本阿贾克斯 ,所以如果你的主机上的CDN(或子域)的样式,你需要上传一个代理页面启用跨域通信。



Answer 3:

我能够完成这项工作,但我不得不插入脚本在body标记。

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

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

我不清楚为什么这个作品,但它解决了我的问题。

请注意:见文的回答为respond.js应该出现在你的CSS后。 在我的情况是在CSS之后,但它不会在工作中head的某些原因。 当插入到body ,它的工作如预期。



Answer 4:

Respond.JS,这是什么引导使用,使媒体查询在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";


Answer 5:

请确保您使用的是本地主机或网络服务器。 “由于安全限制,一些浏览器可能不允许这个脚本文件上工作://网址(因为它使用的XMLHttpRequest )的Web服务器上运行。”

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



Answer 6:

最好的做法是,包括html5shiv.js和respond.js,并确保在本地主机上运行,​​所以它会正常工作。

<!--[if lt IE 9]>

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

<![endif]--> 

我希望这会帮助你。



Answer 7:

如果你想使用的Internet Explorer 11仿效早期版本的Internet Explorer,就要小心了。

互联网浏览器10及更高版本不支持IE条件注释。 的Internet Explorer 11的第一个版本在仿真模式的早期版本上运行时不支持他们甚至。 见条件注释不再支持 (MSDN)。

您应该确认您至少有Internet Explorer中11的第一次更新如果有疑问,只要抓住最新的。

见bug修复条件注释模拟通过F12开发工具文档模式时不工作

而在堆栈溢出问题的讨论为什么不是Internet Explorer 11的荣誉有条件的意见甚至是模仿的Internet Explorer 8文档模式是什么时候?



Answer 8:

出现此错误,因为脚本“respond.min.js”使用的Ajax或类似的东西。 你必须把你的项目在本地或远程服务器上一样WAMP或XAMPP 。



Answer 9:

我只是想补充一点,从GitHub上的example.html的不工作了对IE8在XP盒子!

我发现,当复制到我的服务器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>


Answer 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兼容行和列的布局没有工作,除了对我的地方。



Answer 11:

你必须把你的样式表<link>标签内<head> 尽管所有的浏览器将加载和渲染外部链接的样式表<head>它是(是)对规范和respond.js不会处理它们。



Answer 12:

使用polyfill.io也?

在这种情况下帮助别人,我是用polyfill.io和respond.js 之前加载它。 我需要移动后,它和respond.js开始工作,就像这样:

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


Answer 13:

我有同样的问题,但我解决它,当我包括Modernizr的在我的项目。



Answer 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>

它看起来像条件​​不喜欢,如果你包括在页脚,而不是头部这些脚本同样的效果。



Answer 15:

我一直在拉我的头发了关于这个问题,终于想出了一个解决方案。 我的问题是, CDN ,我们用它来存储所有的媒体。

我搬到respond.js和我的CSS文件都在同一个域,一切工作正常。 我希望这可以帮助别人在类似的困境。



Answer 16:

Internet Explorer 8和下面只能装载一定数量的CSS文件,它们只能有行有一定的最大数量。 如果超出这些限制,则CSS将不会加载。 尝试CSS内容组合成一个单一的文件。



Answer 17:

首先,对于HTML和HTML文件的CSS应该在同一个域中,最终的作品被托管!

其次,

<base target="_blank" />

应该这样写

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

我已尝试上述所有方法。 我们可能会看到下面的演示http://scottjehl.github.io/Respond/test/test.html然后我试图把HTML文件的同一个域的css文件,然后找到它succeed.If你把在HTML文件的CSS,它不能被任何工作。



Answer 18:

我有同样的问题。 花了这么多时间后,我意识到,这是由LESS变量引起的。 我为了关闭响应特性推翻一个引导变量:

@grid-float-breakpoint: 0;

这是打破respond.js的东西。

然后,我把它改成:

@grid-float-breakpoint: 0px;

现在它的工作原理。 我希望它可以帮助别人。



Answer 19:

就我而言,这个问题是css文件之一,是不可用的服务器。 respond.js处理CSS文件的递归函数列表。 随着第一AJAX失败(req.status !== 200 && req.status !== 304)它静静地失败。 我不得不修复错误的CSS路径得到它的工作。



Answer 20:

如果你通过文件浏览页面Respond.js不起作用://
用你的文件夹的服务器,然后它会工作,像HTTP://本地主机/ yoursitename / 。



Answer 21:

我有同样的问题,并通过去除解决它<base>标签在<head> 我发现在堆栈溢出问题的解决Respond.js无法在Internet Explorer 7工作,但H5BP示例工作 。 它可以由以下原因造成:

<base />

并不是

<base></base>

的Internet Explorer 6 - 8(我不知道9)抛出一个不稳定的时候没有关闭标签。 然后,所有其它head标签成为子元素<base> 。 而一切都变得坏了:/。

我希望帮助!



文章来源: Respond.JS Not Working in IE 8