Warum implementiert IE meine CSS-Regeln nicht sofort?

Ich habe Schwierigkeiten mit dem Internet Explorer (sogar so aktuell wie IE11). Ich versuche, JavaScript zu schreiben, mit dem ich dynamisch ein Stylesheet erstellen, es zum Dokument hinzufügen und Stile bearbeiten kann, von denen die meisten auf dem Artikel basieren, der David Walsh schrieb . Er hatte die Idee, das Attribut media des erstellten style -Tags so zu setzen, dass Legacy-Browser einfach Regeln ignorieren, die sie nicht unterstützen können - eine Idee, die ich wirklich mag, aber eine, die mir ein paar Probleme bereitet.

Wenn ich ein style -Tag mit einem media -Attribut komplizierter als "screen" anlege, wenden Firefox und Chrome die neuen Regeln sofort an (vorausgesetzt, die Medienabfrage stimmt überein), aber IE wird erst auf einer Art Seite angezeigt Repaint wird ausgelöst (die Größe der Seite scheint am effektivsten zu sein).

Ich habe eine Geige erstellt, um das Problem besser zu demonstrieren . Ich sehe, dass das Ergebnisfenster in Firefox und Chrome einen grünen Hintergrund hat, in IE jedoch rot, bis das Repaint erzwungen wird. Um tatsächlich ein Repaint zu erzwingen, habe ich ein paar Tricks ausprobiert, um keinen Erfolg zu haben:

• document.body.className = document.body.className;
• element.appendChild(document.createTextNode(' '));
• document.body.style.width = (previousWidth + 1) + 'px'
• Vereinfachung der Medienabfrage auf all and (min-width: 10px) und sogar nur (min-width: 10px)

Meine Frage ist " Wie kann ich den IE dazu bringen, die Stile zu implementieren, wenn sie hinzugefügt werden? " (oder zumindest so kurz wie möglich, kann ich mit einem setTimeout wird benötigt)

Ich benutze jQuery auf der Site selbst, also werde ich eine jQuery-Antwort akzeptieren, aber ich würde eine ohne Bibliotheksabhängigkeit bevorzugen, damit ich besser verstehe, was das Problem verursacht und wie es gelöst werden kann.