CSS неожиданно изменяется при открытии IE. Инструменты разработчика

Question

В настоящее время я тестирую сайт на IE8 (работает на виртуальной машине).

Сайт использует несколько фоновых изображений внутри: до и: после того, как элементы, которые находятся внутри запроса СМИ:

@media (min-width: 980px) { 

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

Я использую respond.js для обеспечения поддержки СМИ запросов на IE8. Правила внутри медиа-запроса применяются сразу же после загрузки страницы (то есть: response.js фактически работает). Однако эти изображения не отображаются.

Забавно: Если я открываю IE Developer Tools (например, нажав F12), изображения внезапно отображаются.

Кто-нибудь испытал нечто подобное? У вас, ребята, есть идея или направление для изучения?

---

Edit: я, наконец, смог решить эту проблему, добавляя содержание к: после псевдо-элемента (я уже применяю это правило, но не внутри запроса средств массовой информации и, по некоторым причинам, он не был применен в IE)

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

в любом случае, я считаю, что это интересно знать, почему раскладка меняется, когда я открыл инструменты Dev ...

Answer 1

пара болевых точек с IE может быть идентифицирован, поэтому стоит проверить следующее:

1. Любое console.log() заявления заставят IE ничего не отображать, пока не будут показаны инструменты разработчика.
2. Когда вы открываете инструменты IE Dev, по умолчанию он отличается от режима совместимости, чем для представления по умолчанию, к которому вы привыкли.