InternetExplorer [IE] IE의 호환성보기 설정하기

IE는 버전업이 될 수록 표준을 준수하도록 렌더링 방식이 변경되고, 새로운 HTML Spec에 맞는 요소와 보안기능 등 새로운 기능이 추가되었습니다. 이로 인해 특정 페이지는 IE 버전에 따라 전혀 다르게 보이기도 합니다.

이 문제해결을 위해 IE6부터는 Standard Mode(일반 보기)와 Compability Mode(호환성 보기)를 선택하여 웹페이지를 출력할 수 있도록 지원하고 있습니다.

Rendering Mode

IE6에서는 보이진 않지만 내부적으로, IE7부터는 사용자가 Rendering Mode를 선택할 수 있도록 제공하고 있습니다. 아래 그림처럼 호환성보기 단추를 통해서 이를 설정할 수 있습니다.

• Standard Mode (Strict Mode) : IE브라우저가 지원하는 최신의 표준에 따라 웹페이지가 출력됩니다.
• Compability Mode (Quirk Mode) : IE9까지는 IE5.5를 기준으로 웹페이지를 렌더링합니다. IE10부터는 이전버전과 다르게 Compability Mode에서도 일부를 HTML 표준에 가깝게 출력됩니다. 이 Compability Mode는 Standard Mode보다 상대적으로 페이지 처리 속도가 다소 떨어집니다.

Default Document Rendering Mode

IE6부터 설정할 수 있는 Document Rendering Mode의 Default 값을 설정하는 방법은 간단합니다. ‘<!Doctype>’을 페이지에 추가하면 Standard Mode, 추가하지 않으면 Compability Mode로 동작합니다.

위의 설정은 Default Rendering Mode를 설정하는 것으로 여전히 사용자는 호환성보기를 자유자재로 설정할 수 있습니다. 이 설정만으로는 사용자가 실수로 호환성 보기를 눌러버려 사이트가 깨져버리는 경우가 여전히 존재합니다.

Specify Document Rendering Mode

Document Rendering Mode를 원하는 버전으로 지정할 수 있습니다. 이 설정을 통해 [호환성 보기] 버튼을 주소표시줄에서 사라지게 할 수 있습니다. 
 
[호환성 보기 버튼이 사라진 모습]

X-UA-Compatible 값을 지정하면 원하는 버전의 IE에 해당하는 Document Rendering Mode로 출력할 수 있게 됩니다.

1. HTML 문서 <Head>에 Meta Tag 추가

   HTML 문서 <Head>에 Meta tag를 다음과 같이 추가하면 지정한 버전의 IE Document Rendering Mode로 출력됩니다.

   1	<!-- IE 7 호환성보기로 보기! -->

   2	<meta http-equiv="X-UA-Compatible" content="IE=7" />

2. IIS설정으로 X-UA-Compatible값을 출력하도록 하기

   각 페이지마다 meta Tag를 일일이 추가하는 것보다 훨신 간결한 방법입니다.

   IIS 6

   1. IIS의 설정 창을 열고 [HTTP Headers]에서 아래와 같이 Custom HTTP headers 값을 설정하시면 됩니다. 
      

   IIS 7 이상

   1. HTTP Response Headers (Http 응답 헤더) 아이콘을 더블클릭 합니다. 
      
   2. [추가]버튼을 클릭하고 아래와 같이 출력을 원하는 IE버전을 입력합니다. 아래는 IE10을 기준으로 출력하도록 합니다. 
      

3. Web.config 설정을 통해 X-UA-Compatible 값을 출력하도록 하기

   ASP.NET Web site를 개발하고 계신다면 Web.config에 다음과 같이 값을 추가하는 것만으로 간단히 설정하실 수 있습니다.

   1	<system.webServer>

   2	<!-- 아래는 가장 최신 IE버전으로 강제하는.. Header Value를 IIS가 출력하게 만든다 -->

   3	<httpProtocol>

   4	<customHeaders>

   5

   <clear />

   6	<add name="X-UA-Compatible" value="IE=Edge" />

   7	</customHeaders>

   8	</httpProtocol>

   9	</system.webServer>

   아래는 X-UA-Compatible 값으로 사용할 수 있는 값 목록입니다.

   값	동작
   IE=edge,chrome=1	현재 설치된 IE의 최신 Standard Rendering Mode로 강제시킵니다. Chrome Frame이 설치된 경우 Chrome Rendering Engine으로 페이지가 출력됩니다.
   IE=edge,chrome=IE8	현재 설치된 IE의 최신 Standard Rendering Mode로 강제시킵니다. IE8 또는 그 이하 버전에서 Chrome Frame이 설치된 경우 Chrome Rendering Engine으로 페이지가 출력됩니다.
   IE=edge	현재 IE브라우저의 최신 Standard Rendering Mode로 강제시킵니다..
   IE=9	IE9 Standard Rendering 방식으로 강제시킵니다.
   IE=EmulateIE9	IE9 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
   IE=8	IE8 Standard Rendering 방식으로 강제시킵니다.
   IE=EmulateIE8	IE8 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
   IE=7	IE7 Standard Rendering 방식으로 강제시킵니다.
   IE=EmulateIE7	IE7 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
   IE=5	IE5 Rendering 방식으로 강제시킵니다. 이는 IE7의 Quirks Mode와 동일합니다.

예외사항

아래와 같은 경우에는 위의 설정을 무시하고 Compatibility Mode로 출력될 수 도 있습니다.

• 사용자가 주소표시줄의 [호환성 보기] 버튼을 클릭한 경우 
  
• [호환성 보기 목록]을 설정한 경우 
  
• 호환성보기 출력을 설정하는 [개발 도구]를 사용 중인 경우 
  
• 페이지가 오류로부터 복구될 때, 기본적으로 [호환성 보기]로 다시 페이지가 열릴 수 있습니다.

참고문서

• http://msdn.microsoft.com/ko-kr/ie/cc405106#Ques_1
• http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx
• http://msdn.microsoft.com/en-us/library/jj676916%28v=vs.85%29.aspx
• http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx