IE显示：表格单元格忽略高度：100％
我需要dynamic地build立一个表来存放一些数据。
我按照通常的方法使用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（可能更高版本，我还没有testing更高版本），我得到以下内容：
忽略围绕“内容”的div的height: 100% 。
根据CanIUse的说法 ，IE8应该提供对相关显示属性的全面支持。
我已经查看了一些类似的问题，所以没有find一个工作的解决scheme：大多数解决scheme要么依赖Javascript（我正在寻求避免），使用固定的高度（同上）或不工作的IE8。
不幸的是， display: table-row height百分比值的效果display: table-row和display: table-cell元素根据规范是不确定的：
当使用百分比值指定高度时，CSS 2.1不定义如何计算表格单元格和表格行的高度。
所以虽然浏览器可能会声称提供对表格布局的全面支持，但某些方面（如百分比高度）可能无法在所有浏览器中始终如一地执行，因为没有正确的行为。 您可以尝试在Microsoft Connect上提出一个问题，希望他们将行为改变为可互操作，但同时您需要find另一种解决方法（即使如此，您也无法保证行为将保持互操作性，即使在其它浏览器）。
更糟糕的是，我刚刚testing过，并影响到所有版本的IE，包括11，这意味着一个IE特定的黑客将在这里不足。 如果您需要使用CSS表格布局，您需要支持IE8，那么纯粹的CSS解决方法可能是不可行的。
对于height: 100%; Internet Explorer 8-10 table-cells height: 100%; 必须用height: 100%; table-row来包装height: 100%; 。
HTML的IE浏览器应该是这样的：
table > table-row > table-cell
而其他浏览器将正常工作
table > table-row or table > table-cell
我再次回顾了这个问题，并且注意到你想将100％的高度设置为不是表格单元格，而是其中的内容。
解决scheme1 ：因此，对于Internet Explorer内容 – 高度与以绝对单位设置的高度最近的元素相关，例如像素，em，如果要使用％高度，则可能还需要在所有父元素上设置100％高度，这将是HTML和正文。 工作示例
解决scheme2 ：只需添加
.content { padding-bottom: 9999px; margin-bottom: -9999px; } .elem { overflow: hidden; }
在这种情况下，您不需要在任何父元素上设置高度。 工作示例 。
希望这可以帮助。
