IE 개발자 도구를 열면 CSS가 예기치 않게 변경됩니다.

Question

현재 IE8 (가상 컴퓨터에서 실행 중)에서 사이트를 테스트하고 있습니다.

이 사이트는 내부의 배경 이미지를 사용 전 : 내가 IE8에 미디어 쿼리에 대한 지원을 제공 respond.js을 사용하고

@media (min-width: 980px) { 

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

: 미디어 쿼리 안에있는 요소, 후. 미디어 쿼리 내부의 규칙은 페이지가로드되는 즉시 적용됩니다 (예 : respond.js가 실제로 작동 중임). 그러나이 이미지는 표시되지 않습니다.

재미있는 점 : IE 개발자 도구 (예 : F12 키)를 열면 이미지가 갑자기 표시됩니다.

누구나 비슷한 경험이 있습니까? 혹시 탐험 할 생각이나 방향이 있습니까?

---

편집 : 의사 요소 (이미하지만,이 규칙을 적용 후하지 어떤 이유로 미디어 쿼리와, 내부 : 은 내가 마지막에 컨텐츠를 추가 할이 문제를 해결 할 수 있었다 그것은 ... 어떤 경우

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

, 나는 그것이 내가이 개발 도구를 열 때 레이아웃이 변경 된 이유를 알고 흥미로운 생각) IE에 적용되지 않았습니다 통증 점

Answer 1

몇 IE를 사용하면 다음을 확인할 가치가 있습니다.

1. 모든 console.log() 문을 사용하면 개발자 도구가 표시 될 때까지 아무 것도 렌더링하지 않게됩니다.
2. IE Dev 도구를 열면 기본적으로 이전과 다른 호환성 모드가됩니다.