I CSS cambiano in modo imprevisto quando apro Strumenti di sviluppo IE

Question

Attualmente sto testando un sito su IE8 (eseguito su una macchina virtuale).

Il sito utilizza alcune immagini di sfondo all'interno: before e: after elementi, che sono all'interno di una media query:

@media (min-width: 980px) { 

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

sto usando respond.js per fornire il supporto per le media query su IE8. Le regole all'interno della query multimediale vengono applicate non appena la pagina viene caricata (ad esempio: respond.js funziona). Tuttavia, queste immagini non sono visualizzate.

La cosa divertente: se apro Strumenti di sviluppo IE (ad esempio premendo F12), le immagini vengono visualizzate all'improvviso.

Qualcuno ha riscontrato qualcosa di simile? Ragazzi avete qualche idea o direzione da esplorare?

---

Edit: ero finalmente in grado di risolvere questo problema aggiungendo contenuti al: dopo pseudo-elemento (ero già applicando questa regola, ma non all'interno della media query e, per qualche ragione, non è stato applicato su IE)

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

In ogni caso, credo che sia interessante sapere il motivo per cui il layout stava cambiando quando ho aperto gli strumenti dev ...

Answer 1

Un paio di punti di dolore con IE può essere identificato in modo vale la pena controllare la seguente:

1. Qualsiasi console.log() dichiarazioni costringeranno IE a non rendere nulla fino a quando gli strumenti di sviluppo sono mostrati.
2. Quando apri gli strumenti IE Dev, è in una modalità di compatibilità diversa per impostazione predefinita rispetto alla visualizzazione predefinita a cui sei abituato.