IE6, IE7, IE8, IE9 브라우저 버전은 4개이나 표준 준수율 또는 버그 발생률에 따라 단 두 가지 종류로 간단하게 구분할 수 있습니다.
IE8~9 브라우저는 HTML/CSS 표준 준수 테스트 도구인 Acid2 테스트에 서 모두 만점을 받은 브라우저 들입니다. 따라서 이 두 버전의 브라우저는 다른 여느 표준계열 브라우저들(크롬, 사파리, 오페라, 파이어폭스)과 어깨를 나란히 합니다. IE8 또는 IE9 브라우저에 최적화된 웹 페이지는 다른 브라우저에서도 별 문제 없이 똑같이 잘 보입니다.
그러나 IE6~7 브라우저는 표준 준수율이 상대적으로 떨어지고 버그도 많습니다. 다행인것은 IE6 브라우저와 IE7 브라우저가 그다지 큰 차이가 없다는 점입니다. IE6 브라우저에서 발생하는 문제는 IE7 브라우저에서 동일하게 발생할 확률이 높습니다. IE7 브라우저가 조금 더 나을 뿐입니다.
결국 저는 IE8~9 브라우저에 대해서는 할 말이 많지 않습니다. IE6~7 브라우저의 문제 해결을 위해서 몇 가지 팁을 소개합니다.
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 브라우저만 이 속성을 해석하고 다른 브라우저는 무시합니다.
추천 : 