개인적으로 인터넷 익스플로러(Internet Explorer) 보다는 구글 크롬(Google Chrome) 또는 모질라 파이어폭스(Mozilla Firefox)를 많이 사용하는데요. 종종 크롬이나 파이어폭스에서는 제대로 보이는 사이트가 IE에서는 제대로 보이지 않는 문제가 발생하곤 합니다. 특히 사이트 개발을 거의 마친 상태에서 이러한 문제에 부딪히게 되면 멘붕에 빠질 수 밖에 없는데요. 하지만 사이트의 <head>와 </head> 사이에 아래의 코드 한 줄만 추가하면 이러한 문제는 금방 해결할 수 있습니다.

IE8 또는 그 이상의 버전에서는 아래와 같은 코드를 사용하세요.

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />

위 코드는 브라우저의 특정 버전의 기본값으로 페이지를 렌더링 하게 됩니다. 하지만 IE 7 또는 그 이하에서는 작동하지 않습니다.

 

 

위와 같이 세미 콜론으로 하나 이상의 IE 버전에 대한 호환성을 설정할 수 있습니다. 이 경우 IE7과 IE8에서는 IE7로 렌더링 하되, IE9에서는 IE9 그대로 렌더링 됩니다.

 

 

위 코드를 사용하면 웹페이지는 현재 사용하고 있는 브라우저의 최신 버전에 맞춰 렌더링 됩니다. 예를들어 IE7을 사용하고 있는 사용자라면 IE7에 맞춰서 렌더링 되며, IE8에선 IE8로, IE9에선 IE9로 렌더링 되는 것이죠.

 

 

만약 크롬을 사용자라면 위 코드를 사용하면 크롬프레임 렌더링을 사용하게 됩니다.

 

저는 일반적으로 이 코드를 많이 사용하는데요. 개발자가 아니라면 사실 각 IE에 맞춰 페이지를 테스트할 일이 거의 없기 때문이죠.

 

지금까지 IE 브라우저 모드 및 문서모드 설정에 대해 알아봤습니다. 여전히 IE 사용자들이 많기 때문에 크롬이나 파이어폭스에서 제대로 보이더라도 IE에서는 레이아웃이 깨질 수 있기 때문에 위 코드를 적절히 활용하면 좋겠습니다.