表格单元格 div 中常规 div 的奇怪填充行为答案

【问题标题】：Strange padding behavior of a regular div inside table-cell div表格单元格 div 中常规 div 的奇怪填充行为
【发布时间】：2017-09-13 05:48:20
【问题描述】：

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

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

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

【问题讨论】：

..这是奇怪的行为。我对此没有任何解释..但这是一种适用于您的情况的解决方法...jsfiddle.net/amb794we
这条评论有更多解释：stackoverflow.com/a/19069129/4338477
@sev，我专门在表格单元格中创建了一个嵌套的 DIV 并将所有填充应用到它，这样我就不会弄乱表格布局。看起来我将不得不在我的情况下制作另一个嵌套的 DIV :(

标签： html css padding

【解决方案1】：

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

在你的小提琴中，我玩弄了内容的填充，并设法用我想要的值的大小（红色）来固定高度。

希望对你有帮助。

【讨论】：

【解决方案2】：

不幸的是，像 .inner 这样的类需要额外的 div 包裹在 .content 周围，该类将专门用作内容周围的填充。

在this codepen 中，我对你的小提琴的 CSS 做了一点改动：

将box-sizing: border-box 设置为所有元素，这是必不可少的
将 .cell 替换为 .inner（仅常青浏览器支持，在 IE .cell 包装器）
删除了块级元素过多的width: 100%

只要.table 的红色背景被.inner 覆盖，就会正确应用边框/填充

【讨论】：

不幸的是，这也不正确。在表格行内必须有表格单元格。智能浏览器“在后台”纠正了这个错误，因此它在 Chrome/FF 等中看起来和工作正常，但在 IE（比如 IE10）中尝试你的代码盘，你会发现高度不是 100%。
确实可以，不过IE11可以认为是智能浏览器