Chrome是否以不同於Firefox的方式處理CSS邊框？

Question

我有下面的CSS運行在div上，當我打印屏幕和物理測量他的寬度時，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; 
    }