Firefox与Chrome下嵌套表格height:100%渲染兼容方案

使用display属性模拟表格结构做嵌套布局时，需要实现内层表格100%高度撑满其所在的外层表格单元格：

• 预期效果：粉色边框的内层表格完全占满对应外层单元格高度，该效果在Firefox浏览器中可正常渲染
  
• Chrome浏览器异常表现：内层表格未撑满单元格高度
  

CSS样式 #

.largeNumber {
  font-size: 10.5em;
  line-height: 1;
}

.table-base {
  display: table;
  border-collapse: collapse;
  width: auto !important;
  margin: 0 auto;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;  
}

HTML结构 #

<div class="table-base" style="border: 1px solid black;">
  <div class="table-row">
    <div class="table-cell">
      <span class="largeNumber">cell1 in t1</span>
    </div>
    <div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
      <div class="table-base" style="border: 3px solid pink; height: 100%;">
        <div class="table-row">
          <div class="table-cell"><span style="color:red">cell1 in t2</span>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell"><span style="color:blue">cell2 in t2</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Chrome的渲染行为符合CSS 2.1官方规范，Firefox的正常显示属于自身实现的非标准容错兼容。
根据CSS 2.1规范中百分比高度的计算规则：元素设置百分比高度时，计算基准必须为父元素已确定的可计算高度。而display: table-cell元素的高度默认由自身内容、同行单元格高度共同计算得出，不会为子元素提供可供百分比高度计算的确定高度基准，Chrome严格执行了这一规则，因此内层display:table元素设置的height:100%无法拿到正确的计算值；Firefox则对表格布局场景做了额外兼容处理，允许单元格内子元素直接参照单元格最终渲染高度计算百分比值，因此表现符合预期。

只需给承载内层表格的外层table-cell元素设置一个任意小于实际渲染高度的明确高度值（比如height: 1px），触发Chrome的高度基准计算即可，无需修改其他逻辑。
修改后的外层单元格代码示例：

<div class="table-cell" style="vertical-align: middle; height: 1px; border: 2px dashed green;">
  <div class="table-base" style="border: 3px solid pink; height: 100%;">
    <!-- 内层表格原有内容保持不变 -->
  </div>
</div>

实现原理：给table-cell设置明确高度值后，Chrome会将该单元格最终渲染的实际高度（仍会被同行更高单元格拉伸到对应等高值）作为百分比高度的计算基准，此时内层表格的height:100%即可正确撑满整个单元格，且该设置不会破坏表格原有的自适应高度特性。

内容的提问来源于stack exchange，提问作者Konrad