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

Question

提问by L84

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.

出于某种原因，响应 JS 似乎不起作用。我在 IE 8 中使用媒体查询来更改各种尺寸显示器的背景图像。在 IE 8 中没有背景，只有纯色。

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?

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

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

注意：看来 html5-shiv 确实有效。我正在实时 Web 服务器上进行测试。

Answer 1

回答by Wen

Same problem. I found out it's my loading sequence problem, because I write CSS inline and then I call respond js script, so it looks like

同样的问题。我发现这是我的加载顺序问题，因为我内联编写 CSS 然后我调用响应 js 脚本，所以它看起来像

<script type="text/javascript" src="js/respond.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

It should be

它应该是

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

ALWAYS link stylesheets or write inline CSS before js scripts!

总是在 js 脚本之前链接样式表或编写内联 CSS！

Answer 2

回答by R Burchall

It could be because you're hosting your CSS on a subdomain or CDN.

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

Respond.js works by requesting a pristine copy of your CSS via Ajax, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

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

Answer 3

回答by L84

I was able to make this work, but I had to insert the script in the bodytag.

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

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

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

I am unsure why this works, but it solved my problem.

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

Please note: See Wen's answeras the respond.js should come after your CSS. In my situation it was after the CSS, but it would not work in the headfor some reason. When inserted into the bodyit worked as intended.

请注意：请参阅Wen 的回答，因为 response.js 应该在您的 CSS 之后。在我的情况下，它在 CSS 之后，但head由于某种原因它在 css 中不起作用。当插入body它时，它按预期工作。

Answer 4

回答by hsobhy

Respond.JS, which is what Bootstrapuses to enable media queries in Internet Explorer 8, does not process @importfiles.

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

From the GitHub repository:Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

来自 GitHub 存储库：Respond.js 不解析通过 @import 引用的 CSS，也不处理样式元素中的媒体查询，因为无法重新请求解析这些样式。

I had to load the bootstrap.css and any CSS that contains media queries in the header

我必须加载 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' />

The following import method does NOT work:

以下导入方法不起作用：

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

Answer 5

回答by Peter_B.

Make sure you are using a localhost or web server. "Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses XMLHttpRequest). Run it on a web server."

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

Source: https://github.com/scottjehl/Respond

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

Answer 6

回答by jeff-h

If you're trying to use Internet Explorer 11to emulate earlier versions of Internet Explorer, be wary.

如果您尝试使用Internet Explorer 11来模拟早期版本的 Internet Explorer，请小心。

Internet Explorer 10and later don't support IEconditional comments. The first release of Internet Explorer 11 didn't support them even when running as an earlier version in emulation mode. See Conditional comments are no longer supported(MSDN).

Internet Explorer 10及更高版本不支持IE条件注释。即使在模拟模式下作为早期版本运行时，Internet Explorer 11 的第一个版本也不支持它们。请参阅不再支持条件注释(MSDN)。

You should confirm that you have at least the first update of Internet Explorer 11. If in doubt, just grab the latest.

您应该确认您至少拥有 Internet Explorer 11 的第一次更新。如果有疑问，请获取最新的。

See the bug fix in Conditional comments do not work when emulating document modes via F12 Developer Tools

通过 F12 开发人员工具模拟文档模式时，请参阅条件注释中的错误修复不起作用

And a discussion in Stack Overflow question Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?.

以及 Stack Overflow 问题中的讨论为什么即使在模拟 Internet Explorer 8 文档模式时，Internet Explorer 11 也不尊重条件注释？.

Answer 7

回答by Venu immadi

The best practice is to include html5shiv.js and respond.js and make sure to run in a localhost, so it will work fine.

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

<!--[if lt IE 9]>

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

<![endif]-->

I hope it will help you.

我希望它会帮助你。

Answer 8

回答by Liam Wheldon

I just wanted to add to this that the example.html from github doesn't work out of the box for IE8 on XP!

我只是想补充一点，来自 github 的 example.html 不适用于 XP 上的 IE8！

I found that the github example didn't work when copied to my server. The solution I found was that the example when being tested with IE8 from XP needs 2 changes!

我发现 github 示例在复制到我的服务器时不起作用。我发现的解决方案是，使用 XP 中的 IE8 进行测试时的示例需要 2 处更改！

Downlaod and extract the content of https://github.com/scottjehl/Respond
Open example.html in cross-domain folder Replace “rawgithub.com” with “rawgit.com” (IE8/xp doesn't like the redirect when including the css files)
Change “https” to “http” as the CDN they use uses SNI which isn't supported in XP, so if you want to support XP users then you'll need to cater for this! (or a less you spend a lot of money to get a dedicated IP on your CDN)

下载并提取https://github.com/scottjehl/Respond的内容
打开跨域文件夹中的example.html 将“rawgithub.com”替换为“rawgit.com”（IE8/xp不喜欢包含css文件时的重定向）
将“https”更改为“http”，因为他们使用的 CDN 使用 XP 不支持的 SNI，因此如果您想支持 XP 用户，那么您需要满足这一点！（或者少花很多钱在 CDN 上获得专用 IP）

Once this was changed, all works well with the example :-) Hope this helps someone :-) Working example.html code below:

更改后，所有示例都可以正常工作:-) 希望这对某人有所帮助:-) 工作 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 9

回答by Genaro

This error occurs because the script "respond.min.js" uses Ajaxor something similar. You must place your project on a local or remote server like WAMPor XAMPP.

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

Answer 10

回答by tprsn

Using polyfill.ioalso?

还使用polyfill.io吗？

In case this helps anyone else, I was using polyfill.ioand was loading it beforerespond.js. I needed to move it after and respond.js started working, like so:

如果这对其他人有帮助，我正在使用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>

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

提问by L84

回答by Wen

回答by R Burchall

回答by L84

回答by hsobhy

回答by Peter_B.

回答by jeff-h

回答by Venu immadi

回答by Liam Wheldon

回答by Genaro

回答by tprsn

相关推荐

最近更新

标签

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

提问by L84

回答by Wen

回答by R Burchall

回答by L84

回答by hsobhy

回答by Peter_B.

回答by jeff-h

回答by Venu immadi

回答by Liam Wheldon

回答by Genaro

回答by tprsn

相关推荐

CSS 如何在 HTML 中包含 SCSS 文件

使用 css 在页面中间居中一个 div 框

CSS 如何将另一个div内的div放置到绝对位置？

Div 独特的 CSS 样式链接

相关推荐

最近更新

标签