CSS ändert sich unerwartet beim Öffnen von IE Developer Tools

Question

Ich teste gerade eine Website auf IE8 (läuft auf einer virtuellen Maschine).

Die Website verwendet einige Hintergrundbilder innen: vor und: nach Elementen, die in einer Medienabfrage sind:

@media (min-width: 980px) { 

    .box:after { 
     ... 
     background: url('../images/assets/home-create-background.png') bottom right no-repeat; 
     ... 
    } 
} 

ich respond.js bin mit Unterstützung für Abfragen auf IE8 Medien zur Verfügung zu stellen. Die Regeln in der Medienabfrage werden angewendet, sobald die Seite geladen wird (dh: respond.js funktioniert tatsächlich). Diese Bilder werden jedoch nicht angezeigt.

Die lustige Sache: Wenn ich IE Developer Tools (zB Drücken von F12) öffnen, werden die Bilder plötzlich angezeigt.

Wer hat etwas ähnliches erlebt? Haben Sie eine Idee oder eine Richtung zu erkunden?

---

Edit: war ich endlich in der Lage, dieses Problem zu beheben, das Hinzufügen von Inhalten zu dem: nach pseudo-Elemente (I bereits Anwendung dieser Regel, aber nicht in der Medienabfrage und aus irgendeinem Grunde, es wurde auf IE nicht angewendet)

.box:after { 
     ... 
     background: url('../images/assets/home-create-background.png') bottom right no-repeat; 
     content: " "; 
     ... 
    } 

auf jeden Fall, ich glaube, es ist interessant zu wissen, warum das Layout zu ändern, als ich die Dev tools ... geöffnet

Answer 1

Ein paar Schmerzpunkte mit IE identifiziert werden kann, so ist es lohnt sich die folgende Überprüfung:

1. Alle console.log() Aussagen IE zwingen wird, nichts zu machen, bis die Entwickler-Tools angezeigt werden.
2. Wenn Sie IE Dev-Tools öffnen, befindet es sich standardmäßig in einem anderen Kompatibilitätsmodus als die Standardansicht, die Sie gewohnt sind.