ie6부터 ie9까지 대응하기_정찬명

"IE6부터 IE9까지 대응하기"

NHN 오픈UI기술팀정찬명

목 차

1. She is still alive2. 국내 웹 브라우저 통계3. IE 브라우저를 표준 준수율에 따라 구분4. IE6~7 문제해결 5. IE6~9 브라우저에서 CSS3 사용하기6. 요점 정리

She is still alive.

She is still alive.

She is still alive.

http://www.youtube.com/watch?v=jiYeMZy0qNo

She is still alive.

Wonder Woman(Lynda Carter)

She is still alive.

16.18%2010.09 - Net Applications - http://bit.ly/do6knz

http://bit.ly/do6knz

She is still alive.

IE6 in Global.

She is still alive.

37.11%2010.09 - Internet Trend - http://bit.ly/9qpZ7Z

http://bit.ly/9qpZ7Z

She is still alive.

IE6 in South Korea.

She is still alive.

Is IE6 dead?

She is still alive.

No, IE6 is still alive.

국내 웹 브라우저 통계


IE를 제외한 브라우저 3.46%.2010.09 - Internet Trend - http://bit.ly/9qpZ7Z

http://bit.ly/9qpZ7Z


IE6는 10년째 한국에서가장 높은 점유율.


"저희 웹 사이트는

IE6를 지원하지 않습니다.

"


손님의 1/3을 받지 않겠음.


웹 개발자는

IE6, IE7, IE8, IE94개 버전의 브라우저에 모두 대응해야 한다.


행정안전부전자정부 웹 호환성 준수지침

2009.8.19


"

최소 3종의 브라우저에서

동등한 레이아웃 및기능 구현

"


"IE 브라우저는

버전과 관계없이

1종의 브라우저입니다

"

IE 브라우저를 표준 준수율에 따라 구분


IE6 | IE7 | IE8 | IE9

IE8 | IE9IE6 | IE7



IE6 IE7 IE8 IE9


IE8, IE9 브라우저는 '웹 표준' 브라우저


웹 개발자가

'웹 표준'을 준수하면

IE8, IE9 브라우저는거의 문제가 되지 않는다.


IE6, IE7 브라우저는 하위 호환성확인 필요.


웹 개발자가

'웹 표준'을 준수해도

IE6, IE7 브라우저는문제가 생길 수 있다.


IE6 브라우저와

IE7 브라우저는

큰 차이가 없다


IE6에서 발생하는 문제는

IE7에서도 대부분 발생한다.

IE6~7 문제해결

IE 6~7 문제해결

표준 DTD 사용하기

IE 6~7 문제해결

DTDDocument Type Definition문서형 정의

DTD 선언 유무와 종류에 따라 브라우저의 화면 표시 방식이 달라짐.

IE 6~7 문제해결

표준 DTD를 사용하지 않거나 DTD를 아예 사용하지 않는 경우웹 브라우저는

IE5 브라우저의 렌더링을 흉내낸다.

이런 상태를 Quirks Mode 라고 한다.

IE 6~7 문제해결

대부분의 브라우저들은 Quirks Mode를 통해서 IE5를 흉내내는데문제는 브라우저마다 IE5를 흉내내는

정도가 다르다는 점.

IE 6~7 문제해결

결국 DTD를 사용하지 않으면

브라우저 호환성을 결코유지할 수 없다.

IE 6~7 문제해결

HTML = XHTML둘 중 어느것을 사용해도 좋다.

어느것이 우월한지에 관한 논쟁은 무의미.

IE 6~7 문제해결

Strict < Transitional

Transitional을 사용하는 것이 좋다.지나친 엄격함은 더 많은 오류를 유발할 뿐.

IE 6~7 문제해결

hasLayout

IE 6~7 문제해결

hasLayouthasLayout이란 IE 브라우저만의고유한 렌더링 방식으로써 IE의 많은 오류들이 관련되어 있다.HTML 요소가 hasLayout을 갖지 못하면 문제 발생.

IE 6~7 문제해결

hasLayout 문제HTML 요소가 화면에 보이지 않음박스의 크기를 잘못 계산마진 또는 패딩의 크기를 잘못 계산etc ...

IE 6~7 문제해결

hasLayout TriggerhasLayout Trigger는 특정 요소가 hasLayout을 갖도록하는속성을 말한다.요소가 hasLayout을 갖도록 하면 문제를 해결할 수 있다.

IE 6~7 문제해결

hasLayout Triggerposition: absolutefloat: left | rightdisplay: inline-blockwidth: auto 외의 모든 값height: auto 외의 모든 값zoom: 1 (IE 전용)

IE 6~7 문제해결

zoom:1다른 브라우저가 해석하지 않는 속성으로써 실무에서 가장 유용.문제 발생시 DOM 구조의 가장 깊은 곳으로부터 순차적으로 적용해 보면 hasLayout 문제를 대부분 해결.

IE 6~7 문제해결

hasLayout 문제는

IE8, IE9 브라우저에서는 발생하지 않는다.

IE 6~7 문제해결

Double Margin Float Bug

IE 6~7 문제해결

.b { float:left; margin-left:100px;}

IE 6~7 문제해결

표준 렌더링

IE6 마진 2배 작용

IE 6~7 문제해결

IE6는

float된 방향과 같은 방향의margin이 설정되면margin이 두 배로 작용한다.

IE 6~7 문제해결

해결 방법.b { float:left; margin-left:100px; display:inline;}

IE 6~7 문제해결

float 처리된 요소는display:block이 되는데이는 어떤 방법으로도 덮어쓰기가 불가능하다.

따라서 display:inline 속성은 IE6 문제해결을 위한 트리커.

IE 6~7 문제해결

position:relative

IE 6~7 문제해결

position:relative hasLayout Trigger는 아니지만그 밖의 다양한 IE 버그에 대한 Trigger 역할을 한다.

IE 6~7 문제해결

display:inline

IE 6~7 문제해결

display:inline Double Float Margin 버그 뿐만 아니라float 처리된 요소에 발생하는 여러가지 문제들을 해결할 수 있다.

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


낡은 브라우저 때문에

신기술을

사용할 수 없다?


신기술을

사용할 수 있다!


첫째, 마이크로소프트에서IE6~8에 탑재한 기술이 CSS3에 채택됨.


둘째, CSS3와 유사한 기술이이미 IE 6~8 브라우저에 존재.


IE6~8 브라우저에서도

신기술을 사용하거나

또는 모방할 수 있다!


word-wrap:

지원 브라우저 : IE6~9, FF, CR, SF, OP


word-wrap:word-wrap:break-word; 지원 브라우저 : IE6~9, FF, CR, SF, OP


text-overflow:

지원 브라우저 : IE6~9, CR, SF, OP


text-overflow:text-overflow:ellipsis; -o-text-overflow:ellipsis; 지원 브라우저 : IE6~9, CR, SF, OP


@font-face{...}



@font-face{...}@font-face{ font-family:ngttf; src:url(NanumGothic.ttf);}@font-face{ font-family:ngeot; src:url(NanumGothic.eot);}body, input, textarea, select, button{ font-family:NanumGothic, 맑은고딕, ngttf, ngeot;}



opacity:



opacity:opacity:0.5;*filter:alpha(opacity=50); 지원 브라우저 : IE6~9, FF, CR, SF, OP


box-shadow:

지원 브라우저 : IE9, FF, CR, SF, OP


box-shadow:

IE6~7 브라우저는 filter 효과를 사용하여 다소다른 표현을 보여준다.


box-shadow:box-shadow:10px 10px 10px silver;-moz-box-shadow:10px 10px 10px silver;-webkit-box-shadow:10px 10px 10px silver;filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=10);



text-shadow:



text-shadow:text-shadow:5px 5px 0 #ccc;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc, Positive=true);display:inline-block; zoom:1;



border-radius:



border-radius:border-radius:30px; -moz-border-radius:30px;-webkit-border-radius:30px;



border-radius:IE6~7 브라우저는 border-radius 속성을 지원하지 않지만마이크로소프트 전용 포멧 자바스크립트 파일ie-css3.htc 를 사용하면 동일하게 렌더링 할 수 있다.

- 관련정보 : http://fetchak.com/ie-css3/- 문제해결 : http://support.microsoft.com/kb/306231/en-us?fr=1

http://fetchak.com/ie-css3/

http://support.microsoft.com/kb/306231/en-us?fr=1


background:gradient

지원 브라우저 : IE6~9, FF, CR, SF


background:gradientbackground:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EAF0E), to(#fff));background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

지원 브라우저 : IE6~9, FF, CR, SF

요점 정리

요점 정리

첫째,현존하는 하위 버전 브라우저에 대한호환성을 지원해야 한다.

요점 정리

둘째,신 기술의 사용을두려워 할 필요가 없다.향상된 경험을 전달하자.

요점 정리

셋째,낡은 브라우저 비난하기 보다는 새 브라우저를 추천.

경청해주셔서고맙습니다.

ie6부터 ie9까지 대응하기_정찬명

Documents