Question

所以今天我遇到了一个奇怪的问题，它只发生在Chrome中。看看小提琴： https://jsfiddle.net/m1npLfcm/1/

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="content">
            </div>
        </div>
    </div>
</div>

有一些基本的表格布局由DIV，表格，行和单元格组成。所有这些都有100％的宽度和高度。在细胞内部有一个普通的DIV。它有100％的宽度和高度，还有一些填充。

我们都知道div的默认框大小：content-box 会通过该填充推动边界。所以我像往常一样做了 box-sizing：border-box ，现在我有这种奇怪的行为。

似乎在这种情况下，box-sizing：内容框仅应用于宽度和高度默认情况下工作正常而不会推动边界。但是，如果我添加box-sizing：border-box - 宽度可以正常工作，但是高度会从中减去总垂直填充，就好像之前的内容框一样，就像它应该的那样。

这到底是什么意思？它只发生在Chrome中，我完全糊涂了。有没有人见过这个以及如何对待它？简短的谷歌搜索没有帮助，因为这个问题很难用几句话来形容。

Answer 1

如果你看到20px的填充是你所说的高度，因为单元格内没有元素或内容，浏览器只会填充填充。

在你的小提琴中，我玩弄了内容的填充，并设法用尺寸（红色）和我想要的值来修正高度。

我希望能帮助你。

Answer 2

不幸的是，div这样的类需要额外的.content .inner，它将专门用作内容的填充。

在this codepen中，我改变了你的小提琴的CSS：

将box-sizing: border-box设置为所有元素，因为它是必不可少的
将.cell替换为.inner（仅受常绿浏览器支持，在IE＆lt; = 10中.cell包装应该保留）
删除了块级元素的过多width: 100%

只要.table

涵盖.inner的红色背景，就会正确应用边框/填充

table-cell div中常规div的奇怪填充行为

2 个答案: