IE 显示：表格单元格子忽略高度：100%

Question

我需要动态构建一个表来保存一些数据。
我遵循了使用带有display: table、display: table-row 和display: table-cell 的div 的常用方法：

.tab {
    display: table;
    height:100%;
    width: 200px;
}

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

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}

<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Or view on Jsfiddle.

在大多数浏览器中，我得到了预期的输出：

但是，在 IE8（可能还有更高版本，我没有测试更高版本）中，我得到以下信息：

在 "Content" 周围的 div 上设置的 height: 100% 被忽略。

根据CanIUse，IE8 应该提供对相关显示属性的全面支持。

我查看了许多关于 SO 的类似问题，但没有找到可行的解决方案：大多数解决方案要么依赖 Javascript（我希望避免这种情况），要么使用固定高度（同上），要么不起作用在 IE8 上。

Answer 1

对于 Internet Explorer 8-10 table-cells 和 height: 100%; 必须由 table-row 和 height: 100%; 包装。

IE 的 HTML 应该是这样的：

table > table-row > table-cell

虽然其他浏览器可以正常工作

table > table-row
or
table > table-cell

[编辑]我再次查看了这个问题，并注意到你想设置 100% 高度不是表格单元格，而是里面的内容。

解决方案1：所以对于Internet Explorer content-height 与最近的元素相关，高度以绝对单位设置，例如像素，em，如果你想使用％高度，你可能还需要在所有父元素上设置 100% 的高度，这将是 html 和 body。 working example

解决方案 2：只需添加

.content {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.elem {
    overflow: hidden;
}

在这种情况下，您不需要在任何父元素上设置高度。 working example.

希望这会有所帮助。

Answer 2

不幸的是，height 的百分比值对display: table-row 和display: table-cell 元素的影响根据spec 是未定义的：

CSS 2.1 未定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。

因此，虽然浏览器可能声称完全支持表格布局，但某些方面（例如高度百分比）可能无法在所有浏览器中一致实现，因为没有正确的行为。您可以尝试在 Microsoft Connect 上提出问题，希望他们将行为更改为可互操作，但与此同时，您需要找到不同的解决方法（即使这样，您也不能保证行为将保持互操作性，即使在其他浏览器中也是如此）。

更糟糕的是，我刚刚进行了测试，这会影响所有版本的 IE，包括 11，这意味着特定于 IE 的 hack 在这里会失败。如果您需要使用 CSS 表格布局，正如您需要支持 IE8 所证明的那样，那么纯 CSS 解决方法可能不可行。