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

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×102px(预期:100px×100px)

没有box-sizing:border-box,外部尺寸为102px×102px(如预期的那样).

为什么是盒子大小:边框只适用于宽度而不是高度？

谢谢 :-)

Answer 1

我发现适用于大多数浏览器的解决方案是避免添加边框来显示:显示中的table-cell元素:table && table-layout:fixed.如果需要边框,请将其放在表格单元格内的常规div(display:block)上.