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

我需要dynamic地build立一个表来存放一些数据。
我按照通常的方法使用div display: tabledisplay: table-rowdisplay: 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更高版本),我得到以下内容:

示例图像2

忽略围绕“内容”的div的height: 100%

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

我已经查看了一些类似的问题,所以没有find一个工作的解决scheme:大多数解决scheme要么依赖Javascript(我正在寻求避免),使用固定的高度(同上)或不工作的IE8。

不幸的是, display: table-row height百分比值的效果display: table-rowdisplay: 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; } 

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

希望这可以帮助。