CSS div with display:table-cell and box-sizing:border-box - width/height calculation inconsistency

Question

Using the latest Google Chrome:

On a page with just this inside body:

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

and the following CSS:

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

    box-sizing:border-box;
}

Actual outer dimensions (including the border): 100px by 102px (expected: 100px by 100px)

Without box-sizing:border-box, outer dimensions are 102px by 102px (as expected).

Why is box-sizing:border-box only applying to the width and not the height?

Thanks :-)

Answer 1

The solution I've found to work for most browsers is to avoid adding borders to display:table-cell elements that are in a display:table && table-layout:fixed. If a border is needed, put it on a regular div (display:block) which is inside the table-cell.