반응형
Error
인터넷 익스플로러 혹은 엣지에서 IE 모드로 페이지를 접속하였을 때,
작성된 소스 코드가 실행되지 않으나 이상하게도 개발자 도구를 열면 정상 작동하는 현상이 발생하였다.
IE의 버전 문제인가도 싶어서 개발자 도구에서 IE의 문서 모드, 인터넷 익스플로러 버전 등을 변경하였지만 연관성은 없어 보인다.
해결방법
메타 태그를 이용하여 브라우저가 렌더링 할 수 있도록 브라우저 호환성 모드를 설정하면 된다.
1. 문제가 발생한 페이지를 에디터로 연다. (Visual Studio Code, 메모장 등)
2. 메타 태그를 추가하거나 수정한다.
- 아래의 코드 html 문서 내에 추가
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
간단 설명
- edge 엔진으로 렌더링하도록 브라우저에게 지시
- 최신 기능과 표준을 사용할 수 있음
즉, 이 글을 보는 우리는 엣지 브라우저에서 IE 모드를 이용하는 상황에 한정되어 있기 때문에 edge로 메타 태그를 추가하여도 소스 코드에는 전혀 지장 없으며 개발자 도구 없이도 잘 실행된다.
개발자 도구에서만 되었던 이유는?
개발자 도구는 해당 브라우저의 렌더링 엔진을 사용한다.
우리가 IE 모드로 변경하여 개발자 도구를 사용하면 결국은 문서 모드(5, 7, 8, 9, 10 , 11)만 변경할 뿐이다.
페이지의 기능이 개발자 도구를 열 때만 작동한다는 것을 바꿔 말하면
IE 모드에서 지원되지 않는 특정 기능을 사용하기 때문에 작동하지 않는 것이다.
현재 엣지 브라우저는 크롬 기반이기 때문에 IE 모드와는 별개로 개발자 도구를 실행하게 되면,
크롬 엔진을 사용하여 페이지를 렌더링하므로 정상적으로 작동하는 것이다.
설명에 틀린 부분이 있다면 댓글 달아주세요!
반응형