CSS div与display：table-cell和box-sizing：border-box-宽度/高度计算不一致 [英] CSS div with display:table-cell and box-sizing:border-box - width/height calculation inconsistency

问题描述

使用最新的Google Chrome浏览器：

Using the latest Google Chrome:

在仅包含此内容的页面上：

On a page with just this inside body:

<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 x 100px）

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

如果没有box-sizing：border-box，则外部尺寸为102px x 102px（按预期）。

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

为什么box-sizing：border-box只适用于宽度而不是高度？

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

谢谢：-）

推荐答案

我发现适用于大多数浏览器的解决方案是避免在显示框内添加边框：显示：表&&表格布局：固定。如果需要边框，请将其放在表格单元格 内的常规div（display：block）上。

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.

这篇关于CSS div与display：table-cell和box-sizing：border-box-宽度/高度计算不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！