html - 表格单元格内元素的高度在 IE 中为 0

Question

我在表格单元格内有绝对定位的元素。所有内部元素都应具有父元素 td 的高度。出于某种原因，我无法用 IE 实现这一点。

我还动态地向空单元格中添加元素。我能够通过修复 IE 中的定位值来获得正确的布局，但是一旦我添加了一个新的内部元素，所有内部元素都失去了它们的高度。例如，如果我调整窗口大小，内部元素会恢复到原来的适当高度。

这是一个 IE 情况的例子，其中内部元素的高度最初为 0。即使它应该与父 td 的高度相同。

table td {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    vertical-align: top;
}

table div.container {    
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: green;    
}

jsfiddle 中的示例:http://jsfiddle.net/Visa/opdfg6t6/56/

Answer 1

在您的 div 中放置一个不间断的空格 ( ) 然后您就可以了。参见 demo

$('.second').bind('click', function() {
    var element = $('<div/>', {
        'class': 'container'    
    });
    $(this).append(element);
});

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

table {
   border-spacing: 0;
   width: 150px;
   table-layout: fixed;
   position: relative;
}

table td {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    vertical-align: top;
    background-clip: padding-box;
}

table div.container {    
    position: static;
    vertical-align:top;
    width: 100%;
    height: auto;
    background-color: green;    
}

<div class="container">
    <table>
        <tbody>
            <tr>
                <td class="header">
                    Header
                </td>
                <td class="first">
                    <div class="container">
                        &nbsp;
                    </div>                                
                </td>
                <td class="second">
                    
                </td>
            </tr>
        </tbody>    
    </table>
</div>