Respond.JS不在IE 8中工作
出于某种原因,似乎回应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(http://img.dovov.combackgrounds/1366-bg.jpg) no-repeat center top fixed #190303; background-size:100% auto; } }
上面的代码在IE 8中无法工作吗? 我应该尝试使用另一个JS来使IE 8 Media Queries起作用吗?
注意:看来html5-shiv确实有效。 我正在一个实时Web服务器上testing。
同样的问题。 我发现这是我的加载顺序问题,因为我写内联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!
这可能是因为你托pipe你的CSS在一个子域或CDN 。
Respond.js的工作方式是通过Ajax请求CSS的原始副本,因此如果您将样式表托pipe在CDN(或子域)上,则需要上载代理页面以启用跨域通信。
我能够做到这一点,但我不得不在脚本中插入脚本。
<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之后,但由于某种原因,它不会在head
工作。 当插入body
它按预期工作。
Respond.JS是Bootstrap在Internet Explorer 8中启用媒体查询时使用的, 不会处理@import
文件 。
从GitHub仓库: Respond.js不parsing通过@import引用的CSS,也不能处理样式元素中的媒体查询,因为这些样式不能被重新请求parsing。
我不得不加载包含媒体查询的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";
确保您使用的是本地主机或Web服务器。 “由于安全限制,一些浏览器可能不允许此脚本在file:// urls上工作(因为它使用XMLHttpRequest ),所以在Web服务器上运行它。
来源: https : //github.com/scottjehl/Respond
最好的做法是包括html5shiv.js和respond.js,并确保在本地运行,所以它会正常工作。
<!--[if lt IE 9]> <script src="js/html5shiv.js"> </script> <script src="js/respond.min.js"> </script> <![endif]-->
我希望这会帮助你。
如果您尝试使用Internet Explorer 11来模拟早期版本的Internet Explorer,请注意。
Internet Explorer 10和更高版本不支持IE
条件注释。 即使在仿真模式下作为早期版本运行,Internet Explorer 11的第一个版本也不支持它们。 请参阅不再支持条件注释 (MSDN)。
您应该确认您至less已经安装了Internet Explorer 11的第一个更新版本。如果有疑问,只需抓住最新版本即可。
在通过F12开发人员工具模拟文档模式时,请参阅条件注释中的错误修复不起作用
并在堆栈溢出问题的讨论为什么即使在模拟Internet Explorer 8文档模式时,Internet Explorer 11不符合条件注释? 。
发生此错误是因为脚本“respond.min.js”使用Ajax或类似的东西。 您必须将您的项目放置在本地或远程服务器(如WAMP或XAMPP)上 。
我只是想补充说,来自github的example.html不能用于XP上的IE8的盒子!
我发现github的例子在复制到我的服务器时不起作用。 我发现的解决scheme是,从XP的IE8testing的例子需要2个变化!
-
在跨域文件夹中打开example.html将“rawgithub.com”replace为“rawgit.com”(IE8 / xp在包含css文件时不喜欢redirect)
-
将“https”更改为“http”,因为他们使用的CDN使用了在XP中不支持的SNI,所以如果你想支持XP用户,那么你需要迎合这个! (或者less花一大笔钱在你的CDN上获得专用IP)
一旦这个改变了,所有的例子都可以正常工作:-)希望这有助于某人:-)下面的代码示例:
<!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>
我通过纠正以下几行的顺序来解决这个问题; 他们应该按照这个顺序:
<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兼容线最后一次,列布局不起作用,除了我的本地。
您必须将样式表<link>
标签放在<head>
。 即使所有的浏览器都会加载和渲染连接到<head>
之外的样式表,它已经被(spec)和respond.js
处理了。
使用polyfill.io也?
如果这有助于其他人,我使用polyfill.io并加载之前 respond.js。 我需要移动它后,response.js开始工作,如下所示:
<link rel='stylesheet' href='/css/screen.css' /> <script src='/js/vendor/respond.js'></script> <script src='http://polyfill.io/'></script>
我有同样的问题,但是当我将Modernizr包含在我的项目中时,我解决了这个问题。
我在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]-->
replace为:
<script type="text/javascript" src="~/Content/js/html5shiv.js"></script> <script type="text/javascript" src="~/Content/js/respond.min.js"></script>
它看起来像条件做相同的效果,如果你将这些脚本包含在页脚而不是头部。
我一直在为这个问题拉我的头发,最后找出一个解决scheme。 我的问题是我们用来存储所有媒体的CDN 。
我把respond.js
和我的CSS文件全部移到同一个域中,一切按预期工作。 我希望这能帮助处于类似困境的人。
Internet Explorer 8及以下版本只能加载一定数量的CSS文件,而且只能有一定的最大行数。 如果你超过这些限制,CSS将不会加载。 尝试将CSS内容组合成单个文件。
首先,html和html文件的CSS应该托pipe在同一个域中,最终可以工作!
其次,
<base target="_blank" />
应该写成像
<base target="_blank"></base>
我已经尝试了上面提到的所有方法。 我们可能会看到下面的http://scottjehl.github.io/Respond/test/test.html的演示,然后我试图把CSS文件放在HTML文件的同一个域,然后发现它成功了。如果你把在HTML文件的CSS,它也无法工作。;
我有同样的问题。 花了这么多时间后,我意识到这是由LESSvariables引起的。 我覆盖了一个Bootstrapvariables,以closures响应式function:
@grid-float-breakpoint: 0;
这是打破respond.js的事情。
然后我改变它:
@grid-float-breakpoint: 0px;
现在它工作。 我希望它能帮助别人。
在我的情况下,这个问题是其中一个css文件不可用在服务器上。 respond.js在recursion函数中处理css文件的列表。 随着第一个Ajax失败(req.status !== 200 && req.status !== 304)
,它失败了。 我不得不修复错误的CSSpath才能正常工作。
如果您通过file查看页面,Respond.js不起作用://
使用你的文件夹与服务器,然后它将工作,如http:// localhost / yoursitename / 。
我遇到了同样的问题,通过删除<head>
的<base>
标签来解决这个问题。 我发现栈溢出问题的解决schemeRespond.js不工作在Internet Explorer 7中,但H5BP示例工作 。 这可能是由于:
<base />
并不是
<base></base>
Internet Explorer 6 – 8(我不确定约9)没有结束标记时抛出摇摆。 然后,所有其他的head
标签成为<base>
子元素。 一切都变了:/。
我希望有帮助!