我需要动态构建一个表来容纳一些数据。
我按照通常的方式使用div：display，table，display：table-row和display：table-cell：
我按照通常的方式使用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>
在大多数浏览器中，我得到了预期的输出：
但是，在IE8(甚至更新的版本，我还没有测试更新的版本)，我得到以下内容：
高度：100％设置在围绕“内容”的div被忽略。
我已经看了很多类似的问题，没有找到一个可行的解决方案：大多数解决方案都依赖Javascript(我正在寻找避免)，使用固定的高度(上一页)或不工作在IE8上。
解决方法
不幸的是，显示百分比值对于height的影响：table-row和display：table-cell元素根据
spec未定义：
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
因此，虽然浏览器可能声称对表格布局提供完全支持，但是由于没有正确的行为，某些方面(例如百分比高度)可能无法始终贯穿所有浏览器。您可以尝试在Microsoft Connect上提出问题，希望他们将行为改变为可互操作的，但同时您将需要找到不同的解决方法(即使这样，您也不能保证行为将保持互操作性，即使在其它浏览器)。
更糟糕的是，我刚刚测试过，这会影响所有版本的IE，包括11，这意味着一个IE特定的黑客将在这里缩短。如果您需要使用CSS表格布局，那么您需要支持IE8的事实证明，那么纯粹的CSS解决方案可能是不可行的。
