Style sheet issue

IE doesn't seem to include styles from a style sheet with a media query more complex than "screen" without a reflow of some kind.

by James Long

HTML

<p>Body is yellow be default, set in CSS.</p>
<p>Body is set to red using media query "screen".</p>
<p>Body is then set to green using media query "screen and (min-width: 10px)" which should match the results.</p>
<p>You should be looking at a <strong>green</strong> background.</p>

CSS

body {
    background-color: yellow;
}

JavaScript

/**
 * @type {Object} styleSheet Collection of useful style sheet manipulating
 * methods and properties.
 */
var styleSheet = {

    /**
     * @type {Object} media Collection of media queries.
     */
    media: {

        screen: 'screen',
        test:   'screen and (min-width: 10px)'

    },

    /**
     * @type {Object} sheets Collection of CSSStyleSheet instances held against
     * media queries.
     */
    sheets: {},

    /**
     * Converts a style sheet element (<style> or <link>) into a CSSStyleSheet
     * instance.
     * 
     * @param {Element} sheet Style sheet element.
     * @return {CSSStyleSheet} Style sheet instance.
     */
    getInstance: function (sheet) {

        var sheets   = document.styleSheets,
            instance = null,
            i        = 0,
            il       = sheets.length;

        while (i < il && instance === null) {

            if (sheets[i].ownerNode === sheet) {
                instance = sheets[i];
            }

            i += 1;

        }

        return instance;

    },

    /**
     * Creates a <style> element to match the given media query.
     * 
     * @param {string} media Media query for the style sheet.
     * @return {CSSStyleSheet} Style sheet instance for that sheet.
     */
    makeSheet: function (media) {

        var element = document.createElement('style'),
            head    = document.head || document.getElementsByTagName('head')[0];

        element.setAttribute('media', media);

        // Webkit hack.
        element.appendChild(document.createTextNode(''));

        head.appendChild(element);

        return this.getInstance(element);

    },

    /**
     * Gets the style sheet for the given media query. If the sheet does not
     * exist yet, it is created and stored.
     * 
     * @param {string} media Media query for the style sheet.
     * @return {CSSStyleSheet} Style sheet instance for that sheet.
     */
    getSheet: function (media) {

        var sheet =...