Question

以下小提琴让我发疯。如果我向左列添加内容，右侧列标题会在惊人的Internet Explorer浏览器中丢失其高度。有什么想法吗？

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:absolute，top，left，right，bottom一起尝试absolute positioning。

当左列具有Internet Explorer中的内容时，表的右列将折叠

1 个答案: