2

我在 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;
}
4

1 回答 1

3

不同的浏览器对边框的处理方式不同,请尝试将其添加到您的 .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;
  }
于 2012-09-26T22:01:01.087 回答