저는 되도록 CSS 핵을 이용하지 않도록 스타일을 작성하려고 합니다.
또한 IE 5.x 버전은 디자인 깨지는 것에 대해서 그리 신경쓰지 않고 있습니다.
IE 5.x 버전의 이용자도 소수이며 줄어드는 추세이고 디자인이 좀 깨지더라도 스크립트가 오류나서 이용을 할 수 없거나 하는 문제는 없으니 그냥 넘어갔습니다.
과거 브라우저에서 좀 깨지더라도 미래에 제대로 보이는 웹사이트가 낫다고 생각합니다.

그래도 이번에 5.x 버전에 신경을 쓰다가 괜찮은 핵을 사용해 봤습니다.
예전에 얼핏 접했던 정보인것 같은데 사용하지 않다보니 무심코 지나친 것 같습니다.

IE 5.x 버전의 정말 짜증나는 버그인데

div{width: 100px; padding-left: 10px;}

위의 css가 IE 6 이나 표준 브라우저에서는 넓이가 110px가 되는데 IE 5.x 에서는 100px가 됩니다.
이 문제를 막기위해 아래와 같은 방법을 쓸 수 있습니다.

div{width: 100px; padding-left: 10px;}
*html div{width: 110px; width: 100px;}

*html은 IE전용 css 코드 입니다. 때문에 *html div 이 부분은 IE에서만 동작합니다.
width: 110px는 IE 5.x 에서 적용되고 width: 100px 는 적용되지 않습니다.
IE 6은 width: 110px;가 적용되더라도 width: 100px 가 다시 적용되어 표준동작에 문제가 없습니다.

이 핵에 대한 자세한 자료는 Box Model Hack 에서 영문 자료로 보실 수 있습니다.

이 핵에 대한 주의사항은 아래와 같습니다. 전에도 말씀드렸듯이 딸리는 영어실력으로 인해 원문과 허접해석을 같이 올립니다.

1) This hack is detrimental on style sheets used by Netscape 4.x and
Opera 5.x. Both are so old you might not care.

2) One must be careful with placing the escape in certain properties.
Do not place the backslash immediately ahead of the characters
a,b,c,d,e. This causes them to be interpreted as hex values. For
example, height:xxx will fail, whereas height:xxx will be OK.

1) 이 핵은 넷스케이프 4.x 버전과 오페라 5.x 버전에서 사용하기에 나쁘지만 둘다 오래된 브라우저니까 신경써줄 필요는 없겠습니다.

2) 적용할 속성의 위치에 주의하여야 합니다.(이게 아닌데 ㅠ_ㅠ)
문자 a,b,c,d,e 의 앞에 역슬래쉬를 넣지 마세요.
이 문제는 hex 값으로 해석되기 때문입니다.(뭔가 이상해 OTL)
예제입니다. height:xxx 하면 안되지만 height:xxx 하면 OK 입니다.

허접한 해석을 그대로 믿지 마시고 원문을 참고하세요.
저는 마음으로 해석하여 받아들였기 때문에 글로 표현하는 것이 어렵군요. ㅡㅡ;

이번에 구입한 MP3 플레이어로 영어강좌 좀 들어야 겠군요. ㅠ_ㅠ