IE显示：table-cell子忽略高度：100％ [英] IE display: table-cell child ignores height: 100%

问题描述

我需要动态建立一个表来保存一些数据。

我遵循了使用divs与 display：table 的常用方法， display：table-row 和 display：table-cell ：

  .tab {display：table;高度：100％; width：200px;}。row {height：100％; display：table-row;}。elem {border：1px solid black; vertical-align：top; display：table-cell;高度：100％; background：blue;}。content {height：100％; background：greenyellow;}  

 < div class = > < div class =row> < div class =elem> < div class =content>内容< / div> < / div> < div class =elem> < div class =content>更长的内容，需要包裹，最终你知道，不要你讨厌它，当事情不结束，因为你期望他们章鱼< / div> < / div> < / div>< / div>  

，IE8应提供对相关显示属性的完全支持。 p>

我已经浏览过一些类似的问题，没有找到一个工作的解决方案：大多数解决方案要么依赖于Javascript（我想避免），使用固定不幸的是，对于<$ c $的百分比值的影响，您可能会遇到一些问题，例如： c> height 在 display：table-row 和 display：table-cell 根据规范未定义：

CSS 2.1不定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。

因此，虽然浏览器可能声称对表格布局提供完全支持，但是某些方面（例如百分比高度）可能无法在所有浏览器中一致实施，因为没有正确的行为。您可以 尝试在Microsoft Connect上提出问题，希望他们可以将行为更改为可互操作，但在此期间，您需要找到一个不同的解决方法（即使这样，您不能保证行为将保持互操作性，即使在其他浏览器）。

更糟糕的是，我刚刚测试，这影响到所有版本的IE，包括11，这意味着IE特定的黑客将在这里短。如果您需要使用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显示：table-cell子忽略高度：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！