브라우저 간 패딩과 마진의 차이_경험교환

여백과 패딩은 항상 사용할 수 있지만 발생하는 문제를 해결하는 방법은 무엇입니까? 브라우저는 컨테이너 너비를 다양한 방식으로 해석하기 때문입니다.
IE 6.0 Firefox Opera 등은
실제 너비=너비+패딩+테두리+여백
IE5.X
실제 너비=너비-패딩-테두리-여백

해결책:

div.content {

width:400px; //이것은 잘못된 너비입니다. 모든 브라우저가 이를 읽습니다.
voice-family: ""}"" //IE5.X/win은 이를 무시합니다. ""}""
voice-family:inherit;
width:300px; //IE6/win을 포함한 일부 브라우저는 이 문장을 읽고 새 값(300px)으로 덮어씁니다. 이전
}
html> ;body .content { //html>body는 CSS2로 작성되었습니다.
width:300px; //IE5가 아닌 CSS2를 지원하는 브라우저에서는 이 문장을 읽을 수 있습니다.
}

div.content {

width:300px !important; //이것은 올바른 너비입니다. !important 태그를 지원하는 대부분의 브라우저는 여기서
width (space)/**/:400px 값을 사용합니다. //IE6/win은 이 문장을 구문 분석하지 않으므로 IE6/win은 여전히 ​​width 값이 300px이라고 생각합니다. IE5.X/win이 이 문장을 읽는 동안 !important로 인해 새 값(400px)이 이전 값을 덮어씁니다. tag 작동하지 않습니다
}
html>body .content { //html>body는 CSS2로 작성되었습니다.
width:300px; //CSS2를 지원하는 브라우저는 운이 좋게도 이 문장을 읽을 수 있습니다.
}

작음