Chrome对待css边界的方式与Firefox不同吗？

Question

我在div上运行下面的css，当我打印屏幕并且物理测量它的宽度时，firefox中的宽度是181px加上左边的1 px边框和右边的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;
  }