html - 当左列在 Internet Explorer 中有内容时，表的右列折叠

Question

下面的小提琴让我发疯。如果我将内容添加到左列，则右列标题在令人惊叹的 Internet Explorer 浏览器中失去其高度。有任何想法吗？

http://jsfiddle.net/P3wBD/

HTML：

<table class="structure">
    <tbody>
        <tr>
            <td class="left" rowSpan="2">
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </td>
            <td class="header" colSpan="2">
            </td>
        </tr>
        <tr>
            <td class="content">
            </td>
            <td class="right">
            </td>
        </tr>
    </tbody>
</table>

CSS：

html, body {
    height: 100%;
    font-family: "Signika Negative";
}

.structure {
    width: 100%;
    height: 100%;
}

.structure > tbody > tr:first-child > td:last-child {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.structure > tbody > tr > td {
    padding: 10px;
}

.structure > tbody > tr > td.left {
    width: 200px;
    background-color: #333;
    padding: 10px 0;
}

.structure > tbody > tr > td.header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #d8d8d8;
    text-align: right;
}

.structure > tbody > tr > td.content {
    border-right: 1px solid #d8d8d8;
}

.structure > tbody > tr > td.right {
    width: 300px;
}

Answer 1

尽量不要使用表格进行布局，它们不是为此设计的，这可能就是它们不起作用的原因。

相反，请根据需要尝试使用, , ,进行绝对定位。position:absolutetopleftrightbottom