CSS zmienia się nieoczekiwanie po otwarciu IE Developer Tools

Question

Aktualnie testuję stronę na IE8 (uruchomioną na maszynie wirtualnej).

Witryna wykorzystuje pewne obrazy tła wewnątrz: before i: after elementów, które są wewnątrz zapytania mediów:

@media (min-width: 980px) { 

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

Używam respond.js w celu zapewnienia wsparcia dla zapytań mediów na IE8. Reguły wewnątrz zapytania o media są stosowane natychmiast po wczytaniu strony (np. Działa działanie response.js). Jednak te obrazy nie są wyświetlane.

Zabawna rzecz: Jeśli otworzę narzędzia programistyczne IE (np. Naciskając F12), obrazy zostaną nagle wyświetlone.

Ktoś doświadczył czegoś podobnego? Czy macie jakiś pomysł lub kierunek do odkrycia?

---

Edit: I była w stanie rozwiązać ten problem dodawanie treści do: po pseudo-elementu (byłem już stosowania tej zasady, ale nie wewnątrz zapytania mediów i, z jakiegoś powodu, to nie była stosowana na IE)

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

W każdym razie uważam, że to interesujące wiedzieć, dlaczego układ się zmienia, kiedy otworzył dev narzędzi ...

Answer 1

kilka punktów bólowych z IE można zidentyfikować więc warto sprawdzić, co następuje:

1. Wszelkie console.log() oświadczenia zmusi IE nie czyni niczego, dopóki narzędzia programistyczne są widoczne.
2. Po otwarciu narzędzi IE Dev domyślnie znajduje się w innym trybie zgodności niż domyślny widok, do którego jesteś przyzwyczajony.