显示的行为不一致：表格和显示：不同浏览器中的表格单元格

Question

在自己使用时，display: table和display: table-cell在不同的浏览器中表现不同。

环境

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

环境1：

• 操作系统：Linux Ubuntu Desktop 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＆amp; box-sizing: content-box

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

在Chrome中，我获得了以下输出：

另见this Fiddle。

<案例2 - display: table＆amp; box-sizing: border-box

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

在Chrome中，我获得了以下输出：

另见this Fiddle。

案例3 - display: table-cell＆amp; box-sizing: content-box

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

在Chrome中，我获得了以下输出：

另见this Fiddle。

案例4 - display: table-cell＆amp; box-sizing: border-box

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

在Chrome中，我获得了以下输出：

另见this Fiddle。

我的问题：

• 规范是否定义了display : table，display : table-row和display : table-cell在彼此独立使用时的行为方式？如果是，那么这些是预期的行为？
• 这些浏览器的差异是由Firefox的Chrome浏览器中的错误造成的吗？如果这些浏览器的差异是由一个错误导致的，那么任何一个浏览器的开发团队都试图解决这个问题吗？
• 虽然这些浏览器差异仍然存在，但我应考虑采用哪种策略来规范浏览器的行为？

Answer 1

在第一个代码段中，由于.content具有百分比高度，但其父级（匿名表格单元格）具有height: auto，因此该百分比应计算为auto。请参阅spec：

  

如果未明确指定包含块的高度   （即，它取决于内容高度），而这个元素不是   绝对定位，值计算为'auto'。

自版本50.0.2629.0（bug 353580）起，Chromium已经修复了此问题（commit）。

第二个代码段更棘手，因为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>

Answer 2

来自Everything You Know About CSS Is Wrong：

  

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

     

    

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

  

     

这意味着如果我们首先使用display: table-cell;   包含设置为display: table-row;的块中的单元格   将隐含 - 浏览器将表现为声明的行   实际上在那里。

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

我仍然不清楚每个案例中的预期行为是什么，但看来我们正在处理错误，that at least Chrome is working on fixing them。

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