When I add a reference to Respond.js to the following web page, a bug occurs in IE7 & IE8. Everything on the page displays much larger than it's supposed to. Compare from IE7 or IE8 to any other browser.
Here are some screenshots of a web page without Respond.js and with Respond.js. As you can see, the one with Respond.js is too large. Any help would be MUCH appreciated!
This seems to be related to 2 CSS font declarations I have in the CSS Reset I'm using: font-size: 100% and font: inherit. Has nobody experienced this same problem??
I've narrowed the problem down a bit. It turns out, when I add the CSS Reset values to the top of my main CSS file, it works fine. For some reason, after adding Respond.js, IE7 & IE8 puts the CSS in the reset file as more important than the CSS in the main CSS file (even though Reset.css is referenced before Style.css). Does Respond.js merge CSS into a single file or reorder them in some way?
Hmm interesting. Respond.js reinserts CSS found in media queries into style tags that are sorted by media type (screen, print, etc). The order in which they are reinserted should be maintained from your CSS, but if you can narrow down the bug, I'll be more than happy to take a look! Should I close this out for now or ?
I haven't been able to narrow the bug any further. All I know is that after adding the script, the Reset.css content takes precedence. Very odd. I've found a work-around that involves loading all the files as LESS files. Since I was planning on using LESS for this project anyway, it seems to work fine.
Thanks for the help though, Scott!