CSS DIV与显示：表细胞和箱尺寸：边界盒 - 宽度/高度计算不一致

Question

采用了最新的谷歌Chrome浏览器：

在一个页面，只是这里面的身体：

<div class="personicon"></div> 

和下面的CSS：

.personicon { 
    display:table-cell; 
    width:100px; 
    height:100px; 
    background-color:#ECECEC; 
    border:1px solid #BBBBBB; 

    box-sizing:border-box; 
} 

实际外尺寸（包括边界）：100像素由102px（预期：100像素100像素）

没有箱子尺寸：边框，外部尺寸是102px乘102px（如预期的那样）。

为什么箱子大小：边框仅适用于宽度而不是高度？

感谢:-)

Answer 1

我发现可以在大多数浏览器中使用的解决方案是避免添加边框来显示：显示中的表格单元格：表格& & table-layout：fixed。如果需要边框，则将其放在内部的表格单元格内的常规div（display：block）上。

Answer 2

的box-sizing声明可以开关盒模型。当你添加border-box时，箱子的尺寸会填满它的边界。外部尺寸将为102px×102px（包括边框）。

当您使用display:table-cell;，高度将允许height和width声明，它将被102px还是画像一个盒子102px。

但实际上，只有在IE中，firefox和-webkit都会绘制100px乘102px，因为MS将表单元格格式化为块级元素，但firefox和-webkit不是，height将允许行高，如果没有，它将允许你定义的height绘制（包括边框）。

Answer 3

根据W3C，display：table-cell中的元素会被包装在“匿名”表格元素中，因此您可能会将该表格的细胞间距作为额外的值来获取。