Question

此问题与表格单元格显示类型中的框模型行为有关，尤其是在Google Chrome中。我已经尝试了一段时间，但仍然不明白发生了什么。以下是我的问题的最小工作示例：

HTML ：

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

CSS ：

* {
    box-sizing: border-box;
}

body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
}

.table {
    display: table;
    height: 100%;
    width: 100%;
}

.row {
    display: table-row;
    height: 100%;
}

.cell {
    display: table-cell;
    height: 100%;
    background-color: red;
}

.container {
    height: 100%;
    padding: 50px;
    background-color: lightgrey;
}

.content {
    height: 100%;
    background-color: grey;
}

（您也可以使用this fiddle。）

在Firefox和Internet Explorer中，单元格填充整个页面，容器边框等于页面边界，内容定位对称内。在Chrome中，单元格仍然填充整个页面，内容仍然对称地放置在容器中。但是，容器底部边框位于页面底部上方（填充两倍）。

对我来说，这看起来好像Chrome应用了两次垂直填充，但第二次只在底部。这只适用于边框框尺寸。

问题：你能解释一下这种行为以及FF / IE和Chrome之间的区别吗？

表格单元格显示类型

0 个答案: