언젠가 어디선가

InternetExplorer8 Beta1 개발자용이 3월 6일 발표된 것은 여기 저기 들어서 많이 아실테고, 새로운 브라우저가 나왔을 때 웹개발자에게 중요한 부분은 뭐니 뭐니해도 기존 페이지가 깨지지 않고 전처럼 보여지는가하는 부분입니다.

이와 관련된 것이 IE의 레이아웃 모드입니다. IE8에서는 Quirks 모드와 Standards 모드가 있습니다. Quirks 모드는 IE7 이하 버젼에서 쓰이던 방식대로 표시를 하는 모드이고, Standards 모드는 웹 표준을 지키는 모드인데요. 브라우저가 다운로드 가능하기 얼마 전에 Standards 모드를 기본으로 하다고 해서 무조건 Standards 모드에서 동작할 경우 예전 페이지가 제대로 표지될 지 걱정이 조금 있었습니다. 그런데, 실제로 다운로드 받아서 테스트해본 결과 최근에 작성한 디자인이 많이 깨지는 페이지가 있는가 하면 아주 오래전에 작성된 엄청난 양의 테이블 태그로 도배를 한 페이지는 잘 나와서 무슨 기준으로 모드를 적용하는지 궁금했었는데, IEBlog에 그 해답이 올라왔습니다. (http://blogs.msdn.com/ie/archive/2008/03/06/the-default-layout-mode.aspx)

모드 적용 기준은 페이지의 DOCTYPE을 보고 판단한다고 합니다.
알려진 DOCTYPE이나 알 수 없는 DOCTYPE을 지정하면 Standards 모드로 동작하고,
META 태그에 예전 모드로 동작하도록 지정하거나 아예 DOCTYPE 태그가 없다면 Quirks 모드로 동작합니다.
그리고, 툴바에 있는 Emulate IE7을 이용하면 IE7 모드로 동작합니다.

IEBlog 글에서는 거의 항상 Standards IE8로 동작이 될 것이라고 했지만, 우리나라는 DOCTYPE을 지정안한 곳이 대부분이기 때문에 큰 문제 없이 Quirks 모드로 표시된다고 보시면 됩니다. -_-;; 다만 DOCTYPE을 지정하여 페이지를 만들고 IE 전용 css 파일을 따로 지정한 경우에는 페이지 디자인이 깨집니다. 표준을 어기는 기존 IE를 위한 css 때문에 표준을 지키는 IE8에서 문제가 생기는 것입니다. ;; 이런 경우 META 태그를 이용하여 동작 모드를 지정해 주어야 합니다.

META 태그를 이용해서 동작 모드를 지정해 줄 때에는 다음과 같이 http-equiv에 X-UA-Compatible을 이용해 지정합니다.

예) <meta http-equiv="X-UA-Compatible" content="IE=8" >

위의 예에서 IE=8 부분의 숫자값을 다른 값으로 바꿔주면 동작 모드를 지정할 수 있습니다. 지정할 수 있는 값은 다음과 같습니다.

5 : Quirks 모드

7 : IE7 Standards 모드

8 : IE8 Standards 모드

edge : 가장 최신 버젼 IE의 Standards 모드(앞으로 나올 버전을 고려)

현재 페이지의 동작 모드는 document.documentMode를 이용하여 알 수 있습니다.

그리고, 현재 Quirks 모드로 동작할 때 테이블의 글씨가 항상 위쪽 정렬(valign=top)된 것처럼 나오는 데 이건 아무래도 버그 같습니다. 직접 valign=center로 지정을 하여도 바뀌지 않습니다.