Question

使用最新的Google 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;
}

实际外部尺寸（包括边框）：100px x 102px（预期：100px×100px）

没有框大小：border-box，外部尺寸为102px×102px（如预期的那样）。

为什么选择框大小：border-box仅适用于宽度而不是高度？

谢谢： - ）

Answer 1

我发现适用于大多数浏览器的解决方案是避免为显示添加边框：显示中的table-cell元素：table＆amp;＆amp;表格的布局：固定。如果需要边框，请将其放在常规div（display：block） inside table-cell中。

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的元素包含在一个“匿名”表元素中，因此您可能会将该表的cellspacing作为额外的。

带显示的CSS div：table-cell和box-sizing：border-box - 宽度/高度计算不一致

3 个答案: