출처: http://monoeyes.com/103

 

실무에서 굉장히 자주 마주치는 익스플로러 6 만의 CSS 버그가 있습니다.

쏭군은 익스플로러 7과, 파이어폭스2를 기반으로 디자인 작업을 합니다.
(사파리나 오페라는 아주 가끔 열어보고요.. 그래서 사파리에서 약간의 문제가 있긴 하지만..)
그래도 익스7, 파폭2에서 제작하면 익스 6이나 다른 브라우저에서도 그럭저럭 잘 뜨더군요..

그런데 익스 6은 역시 요주의 녀석이긴 한게...
레이아웃이라던가 객체가 벌어지는 현상이 안 생길래야 안생길수가 없어서..

실무에서 정말 자주 마주치는 익스플로러 IE용 버그 해결 방법을 몇 가지 쓰고자합니다

float 를 쓴 객체에 margin의 left 값이나 right 값이 들어가면 마진값이 두배로 늘어납니다. 그래서 파폭이나 익스7에서 멀쩡한 레이아웃이 익스 6에서는 마진값이 2배로 불어나서 레이아웃이 깨지거나 벌어집니다. 그래서 반드시 알아야하는 버그해결 법입니다.

float 를 쓴 객체에 margin 가로값을 주고나서는 꼭 display: inline 값을 주자는 것!

거의 모든 IE관련 버그는 홀리핵이라는 녀석을 많이 사용하는데, 사용법은 간단합니다

* html { height: 1px; }

그리고 css 상단에는 모든 * 필터를 이용해서 마진과 패딩을 0으로 셋팅하고 CSS 코딩을 시작한다면, 거의 모든 브라우저의 마진 및 패딩 문제를 해결한 상태에서 코딩을 시작할 수 있습니다. 물론 100% 해결되는 건 아니지만 80% 이상 원하는 시안을 얻는데 도움이 됩니다.

* { margin: 0; padding: 0; }

가장 널리쓰고, 유용한 핵이라고 할 수 있겠습니다~

위에 녀석들도 필수적으로 숙지하고 이용해야 하는 자주 등장하는 녀석들입니다만, 역시 IE의 패딩버그를 따라갈 수 없지요.. 덜덜 ㅠㅠ 이 패딩버그는 상당히 많이 발생하고, 레이아웃도 깨먹고, 고치는데 많이 헷갈리기도 하는 기특한 녀석이라서~ 정말 겁납니다~
위에 사용한 별표 * html 을 이용해서 해결하는 방법이 있습니다~

CSS 표준의 width나 height 값은 border 값, padding 값, margin 값을 모두 제외한 순수한 알맹이 값을 의미하는 반면에 IE는 height나 width에 padding과 border값을 포함합니다. 따라서 상당히 레이아웃 차이가 많이 나는 경우가 있습니다. 그런 경우에는 아래의 방식대로 해결하시면 됩니다.

#content { width: 200px; padding-left: 10px; }

이렇게 하면 일반브라우저에서는 총 너비는 210px 입니다. 그런데 이것을 IE에서는 그대로 200을 유지해버리기 때문에, 실제 크기 210px 을 줘야합니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; }
/* 핵으로 210px 을 줍니다, 패딩은 위에서 줘서 패스~ */

맥용 IE에서는 CSS를 정상적으로 읽는데 핵 때문에 다시 깨집니다. 그래서 다시 맥용 IE를 위해서 아래와 같이 코딩해주면 완성됩니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; w\idth: 200px; }
 /* \ 를 이용해 200px로 돌려줍니다~ */