HTML5 显示表格嵌套 div 不适用于 Firefox 和 Opera答案

【问题标题】：HTML5 display table nested divs not working with Firefox & OperaHTML5 显示表格嵌套 div 不适用于 Firefox 和 Opera
【发布时间】：2013-04-02 07:16:26
【问题描述】：

有以下测试代码。

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:block;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

Firefox 它显示黄色 div 小（作为 table-row 但设置为 display:block）。歌剧也是。 Chrome 在绿色 div（表格行）的 100% 高度显示黄色 div。

我需要它在 Firefox、Opera、IE>8 和 Chrome 中一样工作！

更新：

我发现了以下问题：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="height:50px;display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;">
            <div style="display:block;width:100%;height:100%;background:darkred;">B</div>
        </div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

在 Opera 中无法使用深色 div！

【问题讨论】：

标签： css html css-tables tablerow

【解决方案1】：

这似乎使所有内容在 IE、FireFox 和 Chrome 上呈现一致：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;">
    <div style="display:table-row;background:red;">
        <div style="display:table-cell">A</div>
    </div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">
        <div style="display:table-cell">C</div>
    </div>
</div>
</body>
</html>

唯一的区别是我在每个表格行中添加了display:table-cell div。它将有一个 50 像素高的“C”行，一个最小的“A”行，其余的填充一个黄色的“B”行。

看起来您只需将内部“B”div 从display:block 更改为display:table-cell 就可以轻松逃脱，但我认为最好在table-row 中始终包含table-cell（我可以错了吗？）。

我修改后的所有 3 个浏览器的屏幕截图：

编辑：

如果你想让你的行有相同的高度，你可以使用这个标记：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;">
    <div style="display:table-row;background:red;height:33%">
        <div style="display:table-cell">A</div>
    </div>
    <div style="display:table-row;background:green;height:33%">
        <div style="display:table-cell;background:yellow;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:33%;">
        <div style="display:table-cell">C</div>
    </div>
</div>
</body>
</html>

【讨论】：

为什么红色 div 的高度最小？
看看我的截图。您没有为“A”行指定高度，黄色行的高度为 100%，因此它将占用所有剩余空间。如果您从第一行中删除字母“A”，黄色将填充剩余的空间，并且根本不会有任何红色。
@AdamPlocher - 从最佳实践的角度来看，没有什么需要display:table-cell，CSS 定义了一个单元格将根据需要自动生成。但这意味着在它不存在的情况下，`display:block; height:100%' 是生成单元格高度的 100%。似乎浏览器在这个生成的单元格应该有多高方面有所不同。您的解决方案通过明确设置单元格的高度，消除了这种歧义。
@Alohci 感谢您的澄清。我没有使用过多的 display: table* 东西，这只是我根据旧表标签的工作方式做出的假设。再次感谢。

【解决方案2】：

如果您的目标是所有行的高度相同，那么最好使用合适的表格：

<table style="width:100%;height:100%;">
  <tr style="background:red;">
    <td>A</td></tr>
  <tr style="background:green;">
    <td style="background:yellow;">B</td>
  </tr>
  <tr style="background:blue;">
    <td>C</td>
  </tr>
</table>

这是一个小提琴：http://jsfiddle.net/B5jUh/9/

【讨论】：