메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

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

흑묘 2016.05.13 09:42 read.2569

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

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

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

Rendering Mode

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

image_5.png

  • 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로 동작합니다.

1<!-- <!DOCTYPE>을 선언하면 Standard Mode가 기본 Rendering Mode가 된다.  -->
2<!DOCTYPE html>
3<html lang="ko>
4    <head>
5  ....

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

Specify Document Rendering Mode

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

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 값을 설정하시면 됩니다. 
      image_8.png

    IIS 7 이상

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

  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=9IE9 Standard Rendering 방식으로 강제시킵니다.
    IE=EmulateIE9IE9 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
    IE=8IE8 Standard Rendering 방식으로 강제시킵니다.
    IE=EmulateIE8IE8 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
    IE=7IE7 Standard Rendering 방식으로 강제시킵니다.
    IE=EmulateIE7IE7 Rendering 방식으로 강제시킵니다. Doctype 정의 등에 따라 Standard, Quirks Mode 중 선택됩니다.
    IE=5IE5 Rendering 방식으로 강제시킵니다. 이는 IE7의 Quirks Mode와 동일합니다.

예외사항

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

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

참고문서

[ 출처] http://nsinc.tistory.com/83
추가메뉴 목록
위로