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>

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

1 个答案: