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; 
    }