Firefox에서 작업한 표준 HTML과 CSS 파일은 IE7에서도 그럭저럭 괜찮은 모양을 보여준다. 약간만 CSS를 고쳐주면 동일한 화면 표현이 가능하니 IE도 어느정도 쓸만하다는 느낌이었다.

하지만 VM을 설치하고 IE6에서 본 화면은 정말 볼 수 없을 지경이었다. PNG를 표시해 주지 못하는 것은 물론이고, hasLayout 문제로 인해 다수의 레이아웃 깨짐이 발생하였다. PNG 배경 이미지는 GIF 대체 파일을 만들어 !important Hack을 이용해 어느 정도 해결 되었지만 display 속성에서 좌절하였다.

고민 끝에 아래의 한줄 코드를 적어주니 모든 문제가 해결되었다. -_-;

* html * { zoom:1; width:auto; height:auto; }

‘* html Hack’을 통해 모든 엘리먼트에 ‘zoom:1;’ 속성과 ‘hasLayout’ 속성이 ‘true’가 되도록 선언하는 방법이다. 이 팁을 통해 IE6과 IE7, FF에서 좀더 편하게 코딩할 수 있기를 기대한다.

추가:
zoom:1; 이라는 스타일 속성을 지정하게 되면 IE6에서 <ol> 태그가 정상적으로 동작하지 않는다. 번호가 “1, 2, 3…” 처럼 증가하는 것이 아니고 “1, 1, 1…”로 표시되니 주의해야 하겠다.