브라우저 호환성과 박스 모델

maddie님이 다른 타래에서 쓰시길:

그 반대입니다. width 는 컨텐트 내용만을 지정하며, border, padding, margin 이 거기에 합해져야 맞습니다. 모질라와 IE 6 의 strict mode 는 이것을 표준에 맞게 처리하며, IE 5 는 잘못 처리합니다.

이 방법에 대한 간단한 해결책은 Box Model Hack 이라고 불리며 다음 페이지에서 찾아볼 수 있습니다.

http://css-discuss.incutio.com/?page=BoxModelHack

div {
width: 100px;
}
div {
\width: 140px; 
w\idth: 100px;
}

예를 들어 width 가 100 px 이고 padding 과 border 가 10 px 씩이라고 합시다. 그럼 표준에 따라 전체 크기는 140px 이 되어야 합니다. 위 코드를 사용하면 IE 5 의 CSS 파싱 버그로 \width 는 적용이 되지만 w\idth 는 적용이 되지 않아 IE 5 에만 140px 이 적용되고 다른 브라우저는 100px 이 적용됩니다. 따라서 쉽게 문제를 해결할 수 있습니다.

잘만 하면 자동화도 가능할 것 같습니다. 그리고 한번 자동화 하면 다시는 신경 쓸 필요가 없죠.

-- feanor