title: IE9 loads wrong media query info on load with non-external CSS
body: <p>I have a page which uses non-external CSS in the <code>&lt;style&gt;</code> tags, and in those <code>&lt;style&gt;</code> tags is the following media query:</p>
  
  <pre><code>@media screen and (max-width:768px){
  /* CSS */
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>