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

前端之家收集整理的这篇文章主要介绍了css3 – 带显示的CSS div:table-cell和box-sizing:border-box – 宽度/高度计算不一致前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用最新的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(如预期的那样).

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

谢谢 :-)

解决方法

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

猜你在找的CSS相关文章