인터넷익스플러 핵(hack) 박스모델링

html>body #content {} 이건 인터넷익스플러 핵(hack)입니다. 전체 코드를 확인할 수 없지만, 보통 인터넷익스플러가 CSS를 제대로 랜더링 하지 못하는 박스모델링에서 사용합니다. 인터넷익스플러는 width, height 를 표준이 아닌 MS맘대로 해석하기 때문에 익스플러만 해석하는 html 을 사용한 것입니다. 그건 Tantek Hack이라고 불리우는 CSS Boxmodel Hack입니다.

css boxmodel에선 width란 padding이나 border를 제외한 순수 컨텐츠가 들어가는 박스의 폭을 얘기하지만 IE5.x에선 이 width나 height안에 padding과 border를 포함시켜버립니다.

{ width:100px; padding:10px; border: 10px; }
이런 박스가 있다고 할때 표준 브라우저에서 box의 총 width는 140px이 되지만 IE5.x에선 100px이죠.
그래서 hack이 필요한데 이경우에는 IE5.x의 또다른 버그인 parsing bug를 이용합니다.
키포인트는 ""}"" 입니다.

div.content {
width:400px; /* IE5.x용 */
voice-family: ""}"";

/*IE5.x는 다음룰 무시*/

voice-family:inherit;
width:300px; /*일반 브라우저용*/
}

여기에서 opera5같은 경우는 IE5.x와 동일한 parsing bug가 있지만 boxmodel은 표준을 지원하기때문에 별도로 스타일을 지정해줍니다. ( >주위에 스페이스가 없어야 합니다)

html>body .content {
width:300px; /* Opera 5용 */
}

이 Tantek hack을 사용하려면 반드시 nn4에서는 css가 보이지 않게 해줘야 합니다.

nn4와 opera5같은 브라우저의 문제때문에 이 핵보다는 Simplified Box model Hack이나 Tan hack을 많이 사용하는 편입니다.