Mozilla 한국 커뮤니티

안녕하세요.

HTML을 좀 만지다가 궁금한 사항이 생겨서 이렇게 질문 남깁니다.
현재 <b>DIV</b> 태그에

{ width: 128px; padding-left: 2px; border: RGB(212, 225, 229) 1px solid; font-family: 굴림; background-color: #F3F6F7; }

위와 같은 스타일시트를 적용하였을 경우,
IE의는 width가 정확히 128px인 박스(?)가 생성되는 반면, 모질라는 Padding-left + border-left 1 + border-right 1 도합 6픽셀이 커져서 134px짜리 박스(?)가
생성됩니다.
표현이 좀 뭣하지만.. 이해하셨으리라 생각됩니다.

이상해서 w3c 에서 CSS문서를 찾아보았는데 이런 부분이 있더군요.

--------------------------------------------------
10.3.7 절대적으로 위치된, 대체되지 않은 엘레멘트
이 엘레멘트들에서 계산된 값을 결정하는 공식은:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 용기블럭 너비
--------------------------------------------------

즉 width 를 정해주면 margin이나 border, padding이 바뀌어도 width는 그대로여야 한다는것 아닌가요?
정확히 물어볼곳도 마땅찮고 해서 질문 올려봅니다.
아시는분 속시원히 답좀 주시면 감사하겠습니다.

결론적으로, 모질라가 취급하는 방식이 맞습니다. IE도 버전 6에서 DOCTYPE을 지정하여 표준 준수 모드로 렌더링하면 모질라와 같은 (즉, CSS2 스펙과 같은) 식으로 계산합니다. 디폴트 모드와 IE 구 버전에서는 width:나 height: 계산을 스펙대로 하지 않고 있습니다.

CSS2의 width: 속성 설명을 보면 width는 '내용(content)의 너비'라고 되어 있습니다. margin, padding, border 너비는 내용 너비에 추가적으로 붙어서 계산됩니다. 위 공식의 의미가 그것이죠.

참고로, 같은 CSS로 브라우저간 다른 결과를 보이는 위 문제를 해결하기 위해 box model hack이라는 것이 쓰이기도 합니다.

제가 잘못 이해하고 있었네요... 그러리라 예상은 했었지만,,,
아무튼 답변 감사드립니다..

box model hack에 대하여 알아봐야겠군요

자세히는 모르지만.
div 태그 속에 들어가는 내용에도 스타일시트를 잘 지정해주면
IE 와 모질라의 차이없이 나타나게 할 수 있습니다.
음...있다고 생각합니다...