Respond.JS在IE 8中不起作用

Question

Respond.JS在IE 8中不起作用

L84*_*L84 35 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]-->

Run Code Online (Sandbox Code Playgroud)

Media Query看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

有没有理由上面的代码在IE 8中不起作用？我应该尝试使用另一个JS来使IE 8媒体查询工作吗？

注意:似乎html5-shiv确实有效.我正在测试一个实时Web服务器.

Answer 1

Wen*_*Wen 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!

Answer 2

小智 13

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

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

Answer 3

L84*_*L84 8

我能够完成这项工作,但我必须在body标签中插入脚本.

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

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

Run Code Online (Sandbox Code Playgroud)

我不确定为什么会这样,但它解决了我的问题.

请注意:请参阅Wen的答案,因为respond.js应该在CSS之后.在我的情况下它是在CSS之后,但head由于某种原因它不会起作用.当插入body它按预期工作.

谢谢 - 这给了我解决问题的线索.我首先声明了我的`<script>`标签(包括Respond.js),然后是我的`<style>`标签.颠倒这个顺序修复了它(它与它是否在`<body>中没有任何关系 - 只是顺序重要). (2认同)

Answer 4

hso*_*bhy 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' />

Run Code Online (Sandbox Code Playgroud)

以下导入方法不起作用:

@import "bootstrap.min.css";
@import "media.css";

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	62005 次
最近记录：	10 年，6 月前