IE显示：table-cell child忽略高度：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（以及可能的更高版本，我还没有测试过更新版本）中，我得到以下内容：

“内容”周围的div上设置的height: 100%将被忽略。

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

我在SO上看了很多类似的问题而没有找到可行的解决方案：大多数解决方案要么依赖Javascript（我希望避免使用），使用固定高度（同上以前）或不工作在IE8上。

Answer 1

很遗憾，根据spec

，height和display: table-row元素对display: table-cell的百分比值的影响未定义

  

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

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

更糟糕的是，我刚刚进行了测试，这会影响IE的所有版本，包括11，这意味着IE特定的黑客攻击不足。如果您需要使用CSS表格布局，正如您需要支持IE8那样，那么纯CSS解决方案可能不可行。

Answer 2

对于Internet Explorer 8-10，table-cells height: 100%;必须由table-row height: 100%;包裹。{/ p>

IE的Html应该是：

table > table-row > table-cell

其他浏览器可以正常使用

table > table-row
or
table > table-cell

[edit] 我再次回答了这个问题，并注意到您想要将100％的高度设置为不包含在表格单元格中，而是设置在其内部的内容中。

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

解决方案2 ：只需添加

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

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

希望这有帮助。