IE9 loads wrong media query info on load with non-external CSS

Question

I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:

@media screen and (max-width:768px){
/* CSS */
}

All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.

After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.

Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.

Answer 1

I had a similar problem with an external css file in ie10. I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).

It doesn't solve all my problems, but it may be enough for yours.

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}

Answer 2

I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.

$(document).ready(function() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  window.resizeTo(w, h);
});

Answer 3

I had similar issue while using external css with media query. solved by loading css after html code.