Knowledge Map

IE 호환성, 문서모드 본문

WEB/HTML&CSS

IE 호환성, 문서모드

2016. 7. 4. 14:26

출처

http://blog.hwm.or.kr/archives/50

http://webdir.tistory.com/38


최근 IE8, IE9에서 이상하게 CSS가 계속적으로 깨졌었다.

그래서 이상하다 싶어서 몇가지 확인을 해보다가 간단히 기록해 본다.


일단 개발자 도구를 확인해 보면 브라우저 모드 와 문서 모드가 있다.


'브라우저 모드' 란 현재 브라우저의 기본 셋팅을 정의하는 것을 말하며

'문서 모드' 란 컨텐츠를 랜더링 하는 방식을 정의하는 것을 말한다.





확인해 보니 문서모드가 IE7으로 되어 있었다.

이럴때에는 <head>태그 안에 <meta> 태그를 넣으면 된다.


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


  • 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를 넣어도 제대로 작동하지 않았고 크롬까지 쓰고 나서야 제대로 작동을 했다.

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />


하지만 이렇게 해도 IIS의 설정 등으로 안되는 경우가 있다.

!DOCTYPE을 지정하지 않았거나, 아니면 WebServer에서 Custom Header을 보내는 경우에 그렇다고 한다.

!DOCTYPE은 기본적으로 다들 주는 것이니까 그것을 제외한다면 아래와 같이 IIS에서 해당 웹 사이트의 속성을 확인해 봐야 한다.




위의 밑줄 처럼 ASP.net 또는 online pharmacy of canada "Inherit" 등의 값들이 설정되어 있다면 Header에 원하지 않는 결과가 올수 있으니 삭제를 한다.


'WEB > HTML&CSS' 카테고리의 다른 글

선택자순위, 단위, 기타 css  (0) 2016.07.26
속성 선택자  (0) 2016.07.26
탭키 이동  (0) 2016.05.30
메타태그 정리  (0) 2016.05.30
IE CSS hack or 조건부 if구문  (0) 2016.04.20
Comments