html - 表格单元格 div 内常规 div 的奇怪填充行为

Question

所以我今天遇到了一个奇怪的问题，它只发生在 Chrome 中。 看看 fiddle : 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 的默认 box-sizing: content-box 会通过填充来插入边界。所以我像往常一样做了 box-sizing: border-box 现在我有这种奇怪的行为。

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

这到底是什么鬼？它只发生在 Chrome 中，我很困惑。有没有人见过这个，应该如何处理？简短的谷歌搜索没有帮助，因为这个问题很难用几句话来描述。

Answer 1

如果您看到 20px 的内边距就是您所说的高度，因为单元格内没有元素或内容，所以浏览器只会放置内边距。

在你的 fiddle 中，我玩弄了内容的填充，并设法用 size(red) 和我想要的值来固定高度。

希望对你有帮助。