问题描述
使用最新的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-宽度/高度计算不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！