IE显示:table-cell child忽略高度:100%

Question

我需要动态构建一个表来保存一些数据.
我遵循了使用div的常用方法display: table,display: table-row并且display: table-cell:

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

或者查看Jsfiddle.

在大多数浏览器中,我得到预期的输出:

但是,在IE8(以及可能的更高版本,我还没有测试过更高版本)中,我得到以下内容:

在height: 100%周围的DIV集"内容"被忽略.

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

我已经在SO上查看了许多类似的问题而没有找到可行的解决方案:大多数解决方案要么依赖于Javascript(我希望避免使用),使用固定高度(同上以前)或者不能使用IE8.

Answer 1

不幸的是,根据规范,未定义heighton 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%;.

IE的Html应该是这样的:

table > table-row > table-cell

而其他浏览器可以正常使用

table > table-row
or
table > table-cell

[edit]我再次回顾了这个问题,并注意到你想要将100%的高度设置为不是表格单元格,而是设置在其内部的内容中.

解决方案1:因此,对于Internet Explorer,内容高度与最接近的元素相关,其中高度以绝对单位设置,例如像素,em,如果要使用%height,则可能还需要在所有父元素上设置100%高度,这将是HTML和身体. 工作实例

解决方案2:简单地添加

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

在这种情况下,您不需要在任何父元素上设置高度. 工作实例.

希望这可以帮助.