답변:
IE는보다 편리하지만 비표준적인 "테두리 박스" 박스 모델을 사용했습니다. 이 모델에서 요소의 너비에는 패딩과 테두리가 포함됩니다. 예를 들면 다음과 같습니다
#foo { width: 10em; padding: 2em; border: 1em; }
것 10em넓은.
반대로 모든 표준을 두려워하는 브라우저는 기본적으로 "컨텐츠 상자" 상자 모델로 설정됩니다. 이 모델에서 요소의 너비 에는 패딩 또는 테두리가 포함 되지 않습니다 . 예를 들어,
#foo { width: 10em; padding: 2em; border: 1em; }
실제로는 16em넓습니다. 10em+ 2em각 측면에 패딩, + 1em각 가장자리에 대한 경계.
유효한 markup , 좋은 doctype 및 적절한 헤더 와 함께 최신 버전의 IE를 사용하는 경우 표준을 준수합니다. 그렇지 않으면 최신 표준 호환 브라우저가 다음을 통해 "테두리 상자"를 사용하도록 할 수 있습니다.
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}첫 번째 선언은 Opera, 두 번째는 Firefox, 세 번째는 Webkit 및 Chrome입니다.
다음은 브라우저에서 지원하는 상자 크기 선언을 테스트하기 위해 몇 년 전에 한 간단한 테스트입니다. http://phrogz.net/CSS/boxsizing.html
Webkit (Safari 및 Chrome)은 padding-box선언을 통해 상자 모델을 지원하지 않습니다 .
간단한 규칙은 동일한 요소에 패딩 / 여백 및 너비 속성을 사용하지 않는 것입니다. 즉 이와 비슷한 것을 사용하십시오
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>나는이 질문에 부딪 쳤으며 몇 살이되었지만 누군가이 스레드에 부딪 칠 경우 이것을 추가 할 수 있다고 생각했습니다.
CSS3에는 상자 크기 속성이 있습니다. 설정하면 다음과 같이 말합니다.
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}수업의 너비는 1030px가 아니라 1000px입니다. 물론 이것은 액체 div와 함께 픽셀 크기의 테두리를 사용하는 모든 사람에게 믿을 수 없을만큼 유용합니다. 왜냐하면 그것은 불용성 문제를 해결하기 때문입니다.
또한 상자 크기 조정은 IE7 이하를 제외한 모든 주요 브라우저에서 지원됩니다. 너비 또는 높이 치수 내에 모든 항목 을 포함 시키려면 상자 크기를 경계 상자로 설정하십시오. 다른 항목을 너비 및 / 또는 높이 (기본값)로 집계 하려면 상자 크기를 "content-box"로 설정할 수 있습니다.
브라우저 구문의 현재 상태를 잘 모르겠지만 여전히 -moz 및 -webkit 접두사를 포함합니다.
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}