IE 显示:表格单元格子忽略高度:100%
[英] IE display: table-cell child ignores height: 100%
本文介绍了IE 显示:表格单元格子忽略高度:100%的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要动态建一个表来保存一些数据.
我遵循了将 div 与 display: table、display: table-row 和 display: table-cell 一起使用的常用方法:
.tab {显示:表；高度:100%；宽度:200px；}.排 {高度:100%；显示:表格行；}.elem {边框:1px纯黑色；垂直对齐:顶部；显示:表格单元格；高度:100%；背景:蓝色；}.内容 {高度:100%；背景:绿黄色；}
<div class="row"><div class="elem"><div class="内容">内容
<div class="elem"><div class="内容">更长的内容最终需要环绕，你知道并且当事情没有像你期望的那样结束时你不讨厌它章鱼
，IE8 应提供对相关显示属性的全面支持.>
我查看了许多关于 SO 的类似问题，但没有找到可行的解决方案:大多数解决方案要么依赖于 Javascript(我希望避免这种情况)、使用固定高度(同上)或不起作用在 IE8 上.
解决方案
不幸的是，height 的百分比值对 display: table-row 和 的影响display: table-cell 元素根据规范未定义:
<块引用>
CSS 2.1 没有定义在使用百分比值指定高度时表格单元格和表格行的高度是如何计算的.
因此，虽然浏览器可能声称完全支持表格布局，但由于没有正确的行为，某些方面(例如百分比高度)可能无法在所有浏览器中一致实现.您可以尝试在 Microsoft Connect 上提出问题，希望他们将行为改变为可互操作，但与此同时，您需要找到不同的解决方法(即使如此，您也无法保证行为将保持互操作，即使在其他浏览器中).
更糟糕的是，我刚刚进行了测试，这会影响 IE 的所有版本，包括 11 和 11，这意味着特定于 IE 的 hack 将在这里失败.如果您需要使用 CSS 表格布局，正如您需要支持 IE8 的事实所证明的那样，那么纯 CSS 解决方法可能不可行.
I need to dynamically build a table to hold some data.
I've followed the usual approach of using divs with display: table, display: table-row and 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>
Or view on Jsfiddle.
In most browsers I get the expected output:
However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:
The height: 100% set on the div surrounding "Content" is ignored.
According to CanIUse, IE8 should offer full support for the related display properties.
I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm looking to avoid), use a fixed height (ibid previous) or don't work on IE8.
解决方案
Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the 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.
So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).
To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.
这篇关于IE 显示:表格单元格子忽略高度:100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
