과거 IE가 브라우저 시장을 지배한 탓에 HTTP 표준이 있음에도 불구하고 IE는 이상하게도 표준을 자꾸만 벗어나 있었습니다. 하지만, 이제는 IE도 표준을 무시할 수 없는 탓에 IE도 정신을 차리고 표준을 준수하려고 많이 노력하는 것이 보입니다.
이런 과정에서 발생하는 찌끄레기 중 개발자를 귀찮게 하는 것이 있으니 IE8 부터 등장하는 호환성 모드입니다. IE8 부터 표준에 대한 지원을 강화함에 따라 이전 전용 코드들에 대해서 문제가 발생하는데 이를 해결하기 위한 일종의 땜빵(?)이 호환성 모드입니다. 개발자를 귀찮게 하는 호환성 모드에 대해서 살펴보고자 합니다.
IE8 이후의 버전에서는 F12로 개발자 모드 창을 띄울 수 있습니다. 개발자 모드 창에서 보면 “브라우저 모드”와 “문서 모드” 2가지가 있는 것을 볼 수가 있습니다. “브라우저 모드”는 현재 브라우저의 기본 셋팅을 정의하는 것이고, “문서 모드”는 콘텐츠를 랜더링하는 방식을 정의하는 것입니다.
즉, “문서 모드”에 IE7 로 지정이 되어 있다면, 나의 브라우저가 IE8,9,10 이라 할지라도 콘텐츠를 랜더링하는데 사용되는 방식이 IE7을 따르겠다라는 의미가 됩니다.
이러한 값들에 대한 설정은 호환성 보기 메뉴를 통해서 지정할 수도 있으며, 윈도우 레지스트리
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_NATIVE_DOCUMENT_MODE]
에서도 그 값을 설정할 수 있습니다. 하지만, 이러한 설정을 일반 사용자가 이해하고 설정할리 만무하니 콘텐츠를 제작하는 사람은 자신의 콘텐츠가 사용자 브라우저에서 어떻게 랜더링될 지 결정할 수 있어야 합니다. 이와 같은 이유로 <head> 내에 <meta> 태그를 통해서 콘텐츠를 랜더링 할 “문서 모드”를 지정할 수 있는 코드가 생기게 됩니다.
“문서 모드”는 <head> 태그 내에 아래와 같이 설정하면 위에서 얘기한 사용자의 설정보다 우선하여 적용되게 됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
설정의 세부값은 아래와 같습니다.
1. Quirks Mode 설정<meta http-equiv="X-UA-Compatible" content="IE=5" />
2. Internet Explorer 7 Standards 모드<meta http-equiv="X-UA-Compatible" content="IE=7" />
3. Internet Explorer 8 Standards 모드<meta http-equiv="X-UA-Compatible" content="IE=8" />
4. 가장 최신 Internet Explorer 버전의 Standards 모드<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
추가로 사용자의 PC에 Chrome Browser 가 설치되어 있다면 아래와 같이 설정하여 Chrome Frame 을 이용하여 랜더링 하도록 지정할 수도 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
위와 같이 <head> 태그 내에 랜더링 모드를 설정하였음에도 불구하고 원하는대로 “문서 모드”가 변경되지 않는 경우가 발생할 수 있습니다. 아래와 같은 두 경우에 해당한다면 위에서 설정한 랜더링 모드 설정은 무용지물이 되게 됩니다.
- !DOCTYPE 을 지정하지 않은 경우
- Web Server 에서 Custom Header 를 보내는 경우
즉, 문서에는 반드시 !DOCTYPE 이 지정되어야 하며 !DOCTYPE 이 지정되지 않을 경우 자동으로 쿼크모드(Quirks Mode) 로 동작하게 됩니다. 또한, 웹 서버에서 Response Header 를 보낼 때 Custom Header 를 보내게 되면 <head> 내에 포함된 랜더링 모드는 무시되게 되며, 사용자 PC 에 설정된 호환성 모드를 따르게 됩니다.
Web Server 를 IIS7 을 사용할 경우 사이트를 만들게 되면 Default 로 HTTP Response Header 에 “X-Powered-By” 항목으로 “ASP.NET” 또는 “Inherit” 등의 값들이 설정되어 있을 수 있습니다. 이렇게 추가된 Header 는 원하지 않는 결과를 부를 수 있으니 삭제를 하여야 합니다.
참조문서 : http://msdn.microsoft.com/ko-kr/library/ie/hh920756(v=vs.85).aspx
출처 - http://blog.hwm.or.kr/archives/50
IE8이 등장하면서 새로운 기능 한가지를 추가했습니다. 바로 호환성 보기인데 주소표시줄 옆에 있는 아이콘을 눌러 보신 분도 계실꺼라 생각합니다. 이는 구 버전의 IE를 기준으로 만들어진 웹문서를 IE8이 접근했을때 사용하기 위한 모드인데 브라우저는 버전업이 될때마다 그 이전 버전의 버그픽스 및 표준화에 동참하기 때문입니다.
개발자들이 웹문서를 작성할때 버그를 껴안고 그를 우회하는 방식을 사용하기에 버그가 있는 브라우저와 그 버그가 해결되어진 브라우저의 렌더링이 달라져서 의도치 않게 레이아웃등이 깨질수 있는 것이지요. 이를 방지하기 위해 개발자들은 새 meta 태그(X-UA-Compatible)를 사용해서 IE8에게 어느 랜더링 엔진을 사용할 것인지 전달해야 합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
이 것을 아파치나 IIS 같은 웹 서버에서 구성하여 HTTP 헤더를 통해 정보를 지정해도 됩니다.
위의 content 값에 지정할수 있는 값은 아래와 같습니다.
속성값 | 해석 |
|---|---|
IE=5 | 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다 |
IE=7 | IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용됩니다 |
IE=EmulateIE7 | IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링됩니다 |
IE=8 | IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링됩니다 |
IE=EmulateIE8 | IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링됩니다 |
IE=edge | 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링됩니다 |
마이크로소프트는 실험적인 프로젝트가 아닌 이상 IE=edge 모드를 지정할 것을 권장합니다.
구식 콘텐츠를 위한 특정 렌더링 엔진을 사용하려면 앞서 나열한 content 속성의 다양한 값 중 하나를 지정하면 됩니다. 만약 X-UA-Compatible이 지정된 meta 태그가 없다면 사용자가 호환성 뷰를 선택했는지, 개발자의 사이트가 마이크로소프트 호환성 정보 관리 사이트 목록에 있는지(트래픽이 많은 사이트만 해당)등의 요인에 따라 달라집니다.
출처 - http://webdir.tistory.com/38
X-UA-Compatible Meta Tag Description and Uses:
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify if a page should be rendered as IE 7 (compatibility view) or IE 8 (standards view).
You specify the user agent and version to use in the contents of the tag:
"IE=EmulateIE7"The options you have for the content are:
"IE=5""IE=EmulateIE7""IE=7""IE=EmulateIE8""IE=8""IE=EmulateIE9""IE=9""IE=edge"
Emulating the version tells the browser to use the DOCTYPE to determine how to render content. pages without a DOCTYPE will be rendered in quirks mode.
If you tell it to use the browser version without emulating (i.e."IE=7") the browser will render the page in standards mode whether or not there is a DOCTYPE declaration.
"IE=edge" tells Internet Explorer to use the highest mode available to that version of IE. Internet Explorer 8 can support up to IE8 modes, IE9 can support IE9 modes and so on.
X-UA-Compatible Meta Tag Type:
The X-UA-Compatible meta tag is a http-equiv meta tag.
X-UA-Compatible Meta Tag Format:
Emulate IE 7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">Display as IE 8 with or without a DOCTYPE
<meta http-equiv="X-UA-Compatible" content="IE=8">Quirks Mode (IE 5)
<meta http-equiv="X-UA-Compatible" content="IE=5">X-UA-Compatible Meta Tag Recommended Uses:
Use the X-UA-Compatible meta tag on web pages where you suspect that Internet Explorer 8 will attempt to render the page in an incorrect view. Such as when you have an XHTML document with an XML declaration. The XML declaration at the top of the document will throw the page into compatibility view but the DOCTYPE declaration should force it to be rendered in standards view.
source - http://webdesign.about.com/od/metataglibraries/p/x-ua-compatible-meta-tag.htm
'Development > HTML' 카테고리의 다른 글
| html - a tag에서 점선테두리 없애기 (0) | 2015.06.15 |
|---|---|
| html - role attribute (0) | 2014.05.06 |
| html - content type (0) | 2014.04.15 |
| HTML DOM (0) | 2014.03.06 |
| html - 웹킷(webkit) (1) | 2013.12.10 |
