display: table 和 display: table-cell 在不同浏览器中的不一致行为

Question

单独使用时，display: table 和 display: table-cell 在不同浏览器中的行为不同。

---

环境

我在三种不同的环境中进行了测试：

环境 1：

• 操作系统：Linux Ubuntu 桌面 14、64 位
• 浏览器 1：Chrome 45.0
• 浏览器 2：Firefox 43.0

环境 2：

• 操作系统：Windows 7，64 位
• 浏览器 1：Chrome 48.0
• 浏览器 2：Firefox 44.0

环境 3：

• 操作系统：Windows 10，64 位
• 浏览器 1：Chrome 51.0
• 浏览器 2：Firefox 47.0

---

案例 1 - display: table & box-sizing: content-box

.container {
    display: table;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

在 FireFox 中，我得到以下输出：

在 Chrome 中，我得到以下输出：

另见this Fiddle。

---

案例 2 - display: table & box-sizing: border-box

.container {
    display: table;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

在 FireFox 中，我得到以下输出：

在 Chrome 中，我得到以下输出：

另见this Fiddle。

---

案例 3 - display: table-cell & box-sizing: content-box

.container {
    display: table-cell;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

在 FireFox 中，我得到以下输出：

在 Chrome 中，我得到以下输出：

另见this Fiddle。

---

案例 4 - display: table-cell & box-sizing: border-box

.container {
    display: table-cell;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

在 FireFox 中，我得到以下输出：

在 Chrome 中，我得到以下输出：

另见this Fiddle。

---

我的问题：

• 规范是否定义了display : table、display : table-row 和display : table-cell 在相互独立使用时的行为方式？如果是，哪些是预期的行为？
• 这些浏览器差异是由 Firefox 的 Chrome 中的错误引起的吗？如果这些浏览器差异是由错误引起的，那么任一浏览器的开发团队是否正在尝试修复此问题？
• 虽然这些浏览器差异仍然存在，但我应该考虑哪些策略来规范跨浏览器的行为？

Answer 1

来自Everything You Know About CSS Is Wrong：

CSS 表格很乐意遵守表格布局的常规规则，即 启用 CSS 表格布局的一个极其强大的功能：缺少 表格元素由浏览器匿名创建。 CSS2.1 规范状态：

HTML 以外的文档语言可能不包含所有元素 在 CSS 2.1 表模型中。在这些情况下，“缺失”的元素 必须假设才能使表模型工作。任何桌子 element 会自动生成必要的匿名表对象 围绕自身，由至少三个嵌套对象组成 对应于“table”/“inline-table”元素，“table-row” 元素和一个“表格单元”元素。

这意味着如果我们使用 display: table-cell; 而没有先 包含设置为display: table-row; 的块中的单元格，该行 将被暗示——浏览器将表现得好像声明的行是 确实在那里。

因此，规范明确允许使用 display: table-cell; 或 display: table; 并定义元素在这种情况下的行为方式。

我仍然不清楚每种情况下的预期行为是什么，但似乎我们正在处理错误，that at least Chrome is working on fixing them。

我给了Oriol 这个答案的赏金，因为这是迄今为止我得到的唯一答案，它实际上解决了我提出的观点并提供了一些有价值的信息。

Answer 2

在第一个 sn-p 中，由于 .content 具有百分比高度，但其父级（匿名表格单元格）具有 height: auto，因此百分比应计算为 auto。见spec：

如果未明确指定包含块的高度 （即，它取决于内容高度），并且该元素不是 绝对定位，该值计算为“自动”。

自版本 50.0.2629.0 (commit) 起，Chromium 已修复此问题 (bug 353580)。

第二个 sn-p 更棘手，因为height of the table cell 将是height CSS 属性给定的长度和内容所需的高度之间的最大值。但如果该内容使用百分比，那就是循环定义。

因此，这似乎是一个依赖于实现的案例。您可以通过使内容外流来避免循环定义：

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.container {
  display: table-cell;
  width : 500px;
  height: 150px;
  background: #ccf;
  position: relative;
}
.content {
  color: #000;
  padding: 20px;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="content">
    Center this!
  </div>
</div>