안녕하세요. StyleSheet관련 질문..

[crescent]

안녕하세요.

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는 그대로여야 한다는것 아닌가요?
정확히 물어볼곳도 마땅찮고 해서 질문 올려봅니다.
아시는분 속시원히 답좀 주시면 감사하겠습니다.

[kheled]

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

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

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

[crescent]

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

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

[두슬]

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