Chrome이 CSS 경계를 Firefox와 다르게 처리합니까?

Question

div 아래에서 CSS를 실행하고 화면을 인쇄 할 때 폭을 실제 크기로 측정 할 때 Firefox의 너비는 181px와 왼쪽의 1px 테두리와 오른쪽의 1px입니다. 하지만 Chrome에서 볼 때 너비는 179px이고 테두리는 왼쪽에서 1px이고 오른쪽에서 1px입니다. 마치 상자의 너비만큼 먹은 것처럼. 누구든지 이것에 대해 밝힐 수 있습니까?

.tab{ 
    background:#fff; 
    border-left:1px #000 solid; 
    border-right:1px #000 solid; 
    height:111px; 
    width:181px; 
} 

Answer 1

다른 브라우저는 다르게 boders 치료, 당신의 .tab 클래스에 이것을 추가하려고 :

.tab { 
    ... 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

이 http://paulirish.com/2012/box-sizing-border-box-ftw/ 및/또는 다른 방법으로 http://css-tricks.com/box-sizing/

를 참조하십시오, 당신은이 문제를 해결하려면 다음을 수행 할 수 모든 요소에 대해 '문제':

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    }