问题
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.
回答1:
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
<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!
回答2:
It could be because you're hosting your CSS on a subdomain or 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.
回答3:
I was able to make this work, but I had to insert the script in the body tag.
<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 answer as the respond.js should come after your CSS. In my situation it was after the CSS, but it would not work in the head for some reason. When inserted into the body it worked as intended.
回答4:
Respond.JS, which is what Bootstrap uses to enable media queries in Internet Explorer 8, does not process @import files.
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.
I had to load the bootstrap.css and any CSS that contains media queries in the header
<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";
回答5:
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."
Source: https://github.com/scottjehl/Respond
回答6:
The best practice is to include html5shiv.js and respond.js and make sure to run in a localhost, so it will work fine.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"> </script>
<script src="js/respond.min.js"> </script>
<![endif]-->
I hope it will help you.
回答7:
If you're trying to use Internet Explorer 11 to emulate earlier versions of Internet Explorer, be wary.
Internet Explorer 10 and later don't support IE conditional 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).
You should confirm that you have at least the first update of Internet Explorer 11. If in doubt, just grab the latest.
See the bug fix in Conditional comments do not work when emulating document modes via F12 Developer Tools
And a discussion in Stack Overflow question Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?.
回答8:
This error occurs because the script "respond.min.js" uses Ajax or something similar. You must place your project on a local or remote server like WAMP or XAMPP.
回答9:
I just wanted to add to this that the example.html from github doesn't work out of the box for IE8 on XP!
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!
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)
Once this was changed, all works well with the example :-) Hope this helps someone :-) Working example.html code below:
<!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>
回答10:
I resolved this problem by correcting the order of the following lines; they should be in this order:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I had the X-UA-Compatible line last and the column layouts didn't work, except for on my local.
回答11:
You must place your stylesheet <link> tags within the <head>. Even though all browsers will load and render stylesheets linked outside the <head>, it is (was) against spec and respond.js won't process them.
回答12:
Using polyfill.io also?
In case this helps anyone else, I was using polyfill.io and was loading it before respond.js. I needed to move it after and respond.js started working, like so:
<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
回答13:
I had the same issue, but I solved it when I included Modernizr in my project.
回答14:
I had the following links in the Internet Explorer condition. I had to take those scripts out of the condition.
<!--[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 with this:
<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>
It looks like the condition do the same effect like if you include these scripts in the footer instead of the head.
回答15:
I've been pulling my hair out about this issue and finally figured out a solution. My issue was the CDN we use to store all of our media.
I moved respond.js and my CSS files all on the same domain and everything worked as expected. I hope this helps someone in a similar predicament.
回答16:
Internet Explorer 8 and below can only load a certain number of CSS files, and they can only have a certain maximum number of lines. If you go over these limits, the CSS won't load. Try combining CSS content into a single file.
回答17:
firstly,The css for the html and the html files should be hosted in the same domain,which eventually works!
secondly,
<base target="_blank" />
should be written like
<base target="_blank"></base>
I have tried all methods that mentioned above. we may see the demo of the following http://scottjehl.github.io/Respond/test/test.html then I tried to put the css files on the same domain of the html file,then found it succeed.If you put the css in the html file,it could not be worked either.
回答18:
I had the same problem. After spending so much time, I realized that this is caused by a LESS variable. I overrode a Bootstrap variable in order to turn off responsive features:
@grid-float-breakpoint: 0;
This was the thing that broke respond.js.
Then I changed it to:
@grid-float-breakpoint: 0px;
and now it works. I hope that it helps someone.
回答19:
In my case, the issue was one of the css files was not available on server. respond.js processes the list of css file in a recursive function. With the first ajax failure (req.status !== 200 && req.status !== 304), it fails silently. I had to fix the wrong css path to get it working.
回答20:
Respond.js doesn't work if you view the page via file://
Use your folder with server then it will work, like http://localhost/yoursitename/.
回答21:
I had the same problem and resolved it by removing the <base> tag in the <head>. I found the solution in Stack Overflow question Respond.js not working in Internet Explorer 7, but H5BP example works. It can be caused by:
<base />
and not
<base></base>
Internet Explorer 6 - 8 (I am not sure about 9) throw a wobbly when there is no closing tag. Then all the other head tags become child elements of <base>. And everything becomes broken :/.
I hope that helps!
来源：https://stackoverflow.com/questions/15127040/respond-js-not-working-in-ie-8