meta X-UA-Compatible, IE 버전별로 css 적용하기

오랫동안 수정하지 않는 관리자 페이지를 유지 보수한 적이 있습니다.

IE에서 많은 부분이 깨져서 보여서 확인해 본 결과 X-UA-Compatible이 IE=5로 되어 있었습니다.

새로 바꾸려고 하는 코딩은 IE=edge에 맞춰져 있어서 버전에 맞지 않는 css 때문에 깨진 것이었습니다.

 

저는 원인 파악해서 코딩하시는 분과 IE=edge로 바꾸고 웹페이지에서 깨지는 부분을 같이 찾아서 알려드리고 수정해서 주셨습니다. 이런 부분은 코딩하시는 분 개발하시는 분 둘 다 손이 많이 갔고 오래전에 만든 웹페이지라 <table> 태그 안에 <table> 태그가 있고 해서 수정하기도 까다로웠습니다.

 

X-UA-Compatible 란?

<meta http-equiv="X-UA-Compatible" content="IE=edge">

위에 해당 meta는 브라우저의 호환성 모드를 조정하는 역할을 합니다.

 

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 버전 변경 하는 방법

 

IE > 개발자 도구 > 에뮬레이션

해당 페이지 코딩에 meta X-UA-Compatible 태그가 있다면 기본값으로 설정되어있습니다.

버전을 변경할때 에뮬레이션을 사용하여 변화되는 부분 및 깨지는 부분을 좀 더 쉽게 확인할 수 있습니다.

 

이런 방법 말고 IE 버전별로 css를 적용하는 방법도 있습니다.

 

#1 css 적용

<link rel="stylesheet" type="text/css" href="default.css" />

#2 모든 IE에서만 적용

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

#3 IE7 버전에서만 적용

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><[endif]-->

#4 IE6 버전에서만 적용

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><[endif]-->

#3 IE5 버전에서만 적용

<!--[if IE 5]><link rel="stylesheet" type="text/css" href="ie5.css" /><[endif]-->

 

위에 있는 거 조건 말고도 IE7 버전보다 (이하, 이상, 미만, 초과) 버전에서만 적용하는 조건도 있습니다.