IE 호환성 문제를 피하기 위한 페이지 모드 지정

웹 페이지를 만들 때 필자는 크롬으로 디버깅하는 것을 좋아한다.물론 크롬이 하향 조정한 페이지는 IE와의 호환성에 큰 문제가 있다.다행히 IE8 이후 IE의 호환성 문제는 이미 매우 크게 달라졌다.회사가 하는 것은 기업 응용이기 때문에 사용자가 사용하는 소프트웨어, 하드웨어에 대해 일정한 요구를 제기할 수 있다. 적어도 IE8 및 더 높은 버전의 브라우저 운영 시스템에 대한 요구가 까다롭지 않기 때문에 호환성 문제는 훨씬 쉽다.그러나 IE8과 IE9은'호환 모드'를 가지고 있기 때문에 페이지에 일정한 설정을 하지 않으면 브라우저가 자동으로 호환 모드를 사용하고 Quirks 모드나 IE7 문서 모드를 사용하여 페이지를 해석할 수 있기 때문에 호환성 문제가 발생하는 것은 불가피하다.
페이지의 파일 모드를 지정하여 페이지에 메타 요소를 사용하여 X-UA-Compatible http-equiv 헤더에 넣을 수 있습니다.다음은 아날로그 IE7 모드로 지정된 예입니다.
<html>
    <head>
        <!-- Mimic Internet Explorer 7 -->
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
        <title>My Web Page</title>
    </head>
    <body>
        <p>Content goes here.</p>
    </body>
</html>

그 내용은 지정한 페이지 모드에 따라 변경됩니다. IE=5, IE=7, 또는 IE=8을 지정하면 호환성 모드를 선택할 수 있습니다.IE=edge를 지정하여 IE8이 지원하는 최고 모드를 사용하도록 지시할 수도 있습니다.
http-equiv 속성
meta 요소의 http-equiv 속성은 서버가 실제 문서를 보내기 전에 브라우저에 전송할 MIME 문서 헤더에 이름/값 쌍을 포함하도록 지시합니다.서버가 브라우저에 문서를 보낼 때, 먼저 많은 이름/값 쌍을 보냅니다.일부 서버는 이런 이름/값을 많이 보내지만 모든 서버는 최소한 하나를 보내야 한다:content-type:text/html.이것은 브라우저에 HTML 문서를 받아들일 준비를 알려 줍니다.
http-equiv 속성이 있는 탭을 사용하면 서버는 브라우저에 보내는 내용 헤더에 이름/값을 추가합니다.예를 들어, 추가:
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

이렇게 하면 브라우저에 전송되는 헤드에는 다음이 포함됩니다.
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

물론 브라우저가 이 추가된 헤더 필드를 받아들일 수 있고, 적당한 방식으로 사용할 수 있을 때만 의미가 있다.
X-UA-compatible 헤더는 대소문자 구분이 없으며 이 속성은 IE 브라우저에만 적용됩니다.그러나 타이틀 요소와 다른 메타 요소를 제외하고는 웹 페이지 헤드 노드의 다른 요소 앞에 나타나야 합니다.
판정 파일 호환성 모드
웹 페이지가 IE 브라우저를 사용할 때의 파일 호환성 모드를 판정하려면 문서 대상의 문서 모드 속성만 보십시오. (물론 IE 브라우저만 이 속성이 있습니다.)예를 들어 IE8의 주소 표시줄에 다음 코드를 입력하면 현재 페이지의 파일 모드가 표시됩니다.
    javascript:alert(document.documentMode);
DOCTYPE 정보:
IE6는 웹 개발자가 IE가 웹 페이지를 컴파일하고 표시하는 방식을 선택할 수 있도록 한다.'Quirks mode'를 미리 설정하면 페이지가 구 버전의 브라우저의 시점으로 보일 수 있다.'Standards mode'('strict mode'라고도 부른다)의 특징은 업계 표준을 지원하는 것이 가장 완벽하다는 것이다.그러나 이 강화된 지원 기능을 이용하려면 웹 페이지에 적절한 명령어
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

웹 페이지에 명령, IE6에서 quirks mode로 표시됩니다.웹 페이지에 유효한 명령은 브라우저에서 인식할 수 없으며 IE6에서는 이를 IE6 standards mode로 표시합니다.

좋은 웹페이지 즐겨찾기