• Q&A
  • 회원가입
  • 로그인

[web] Ie6부터 ie9까지 대응 (=익스플로러 하위 브라우저 호환 처리법)


홈짱닷컴 접속자 기준: IE6, IE7  : 약 7%  (2015년 기준)  현재, 거의 무시해도 좋은 수치이긴 함. 
개인적으로 모든 홈페이지가 익스 8 이하 브라우저는 개무시했으면 싶음. 저도 8이하는 무시 ㅡㅡ;;;

IE6, IE7  /  IE8, IE9  (표준 준수율 또는 버그 발생률에 따라 두 그룹으로 구분 가능)


(1) IE8, IE9 : HTML/CSS 표준 준수 O.  따라서, DTD 선언하고 웹 표준 지키면 크로스 브라우징 됨.

(2) IE6, IE7 : HTML/CSS 표준 준수 X.  그래서, DTD 선언하고 웹 표준 지켜도 엉뚱하게 출력 가능.



IE6, IE7 크로스브라우징 (=동일 화면 구현)이 관건 임.


IE6~7 문제해결.

  • IE6~7 브라우저도 표준에 따라 구현된 브라우저 입니다. 표준 DTD를 사용하면 표준에 따라 잘 렌더링 해줍니다. 반드시 표준 DTD를 사용하세요. DTD를 사용하지 않으면 모든 브라우저들이 IE5 버전의 브라우저를 흉내내는 Quirks Mode 상태가 되어 각기 다른 뷰를 출력합니다.
  • 사용자에게 무엇이 더 좋은지 HTML과 XHTML의 우위를 논하는 것은 무의미 합니다. 그러나 XHTML의 엄격한 문법이 개발자에게는 더 유리할 것입니다.
  • 엄격한(Strict) DTD와 호환형(Transitional) DTD 가운데 호환형 DTD를 추천합니다. 엄격함은 많은 오류를 유발할 뿐입니다.
  • 마이크로소프트의 독자적인 표현방식인 hasLayout이 존재한다는 것을 알아야 합니다. hasLayout이 없으면 문제가 발생하는 경우가 많습니다. IE6~7 브라우저에서 화면에 특정 요소가 보이지 않거나 잘못된 표현을 하면 { zoom:1 } 속성을 추가로 부여하여 해결되는 경우가 많습니다. zoom 속성은 hasLayout Trigger 이며 다른 브라우저들은 해석하지 않는 속성입니다.
  • float된 방향와 같은 방향의 margin이 존재하는 경우 IE6 브라우저는 margin을 두 배로 출력하는 빈도 높은 버그가 있습니다. float이 부여된 요소에 display:inline 속성을 부여하면 해결됩니다. float 처리된 요소는 display 속성이 block으로 바뀌는데 이 값은 절대로 덮어쓰기가 되지 않습니다. float된 요소에 inline 속성을 부여해도 여전히 block 이라는 뜻입니다. 그 밖에 float 요소는 마지막 텍스트 콘텐츠를 복사해서 출력하는 버그도 있는데 이 때에도 display:inline 속성을 부여하면 해결됩니다.
  • zoom 속성으로 문제가 해결되지 않으면 position:relative 속성을 사용해 봅니다. display:block 으로 처리한 a 요소의 클릭 영역이 제대로 잡히지 않는 문제를 해결할 수 있습니다. 마우스 커서 모양의 잘못된 출력도 해결.
  • *property:value와 같은 형식으로 속성 앞에 '*' 별표를 붙이면 IE6, IE7 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.
  • _property:value와 같은 형식으로 속성 앞에 '_' 언더바를 붙이면 IE6 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.

IE6~9 브라우저에서 CSS3 사용하기.

마이크로소프트에서 이미 오래전에 브라우저에 탑재했던 기술이 CSS3 표준으로 채택(word-wrap, text-overflow, @font-face)이 되기도 했고 CSS3와 유사한 기술(filter)이 이미 IE6~8 브라우저에 구현되어 있기도 합니다. 

익스플로러 전용 주석 구문을 이용하는 것도 한 방법임.

- 정찬명 님 -




IE6에서 hasLayout 버그를 피하는 방법


IE6에서 [float]속성을 적용한 요소가 양옆으로 늘어나거나 화면 축소 확대시에 레이아웃이 겹치거나 하는 현상은 [hasLayout]속성이 [false]값일때 일어나는게 대부분 입니다. 

 

[hasLayout]속성은 읽기 전용이고 [true]값을 지정해 줄 수가 없기 때문에 [hasLayout]속성값을 [true]로 바꿔주는 css속성을 기술해줘야 합니다. (아이러니 하네요)

 

 

 

[hasLayout]속성을[true]로 설정해주는 CSS속성들 

 

 

속성명

1

display

inline-block

2

height

any value

3

float

left or right

4

position

absolute

5

width

any value

6

writing-mode

tb-rl

7

zoom

any value

 

 


IE6에서 [hasLayout]에 의한 CSS버그를 피하기 위해서는 위의 속성중 어느것이든 하나만 들어 있으면 버그를 피할 수 있습니다.   

 

하지만, 특정 태그요소에는 위의 속성중 적용이 불가능한 경우가 있으니 한가지 속성을 적용해서 버그가 해결되지 않는다면 다른 속성을 써 보는 것으로 버그 회피가 가능합니다.

 

 

 

 zoom:1   강추 !!

[출처] haslayout 이란!|작성자 장진혁


정보 출처: DoAndThink 님

코딩 공부는 「홈짱닷컴」에서...

방문자 수

오늘 432
어제 1,993
최대 2,543
이달 9,743
전체 1,131,736
찾아주셔서 감사합니다. Since 2012