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

【问题标题】：Right column of table collapses when left column has content in Internet Explorer当左列在 Internet Explorer 中有内容时，表的右列折叠
【发布时间】：2013-01-28 20:15:36
【问题描述】：

下面的小提琴让我发疯。如果我将内容添加到左列，则右列标题在令人惊叹的 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;
}

【问题讨论】：

SO 告诉你发布代码是有原因的...
jsfiddle.net/P3wBD
是的，问题确实是您使用表格进行布局。我意识到您在下面说过“无表格 [...] 更难更改”，但如果做得好，它们实际上并非如此。你是怎么尝试的？它可以像定义一个<header>、一个<nav> 和两个<div>s 一样简单，而且更加优雅和灵活。另外，请不要骂人。
伙计，我知道该怎么做，我会在几分钟内为您发布相同的布局小提琴。但你听起来也很自命不凡。我有一个知道 html 和 css 基础知识的 c# 编码人员团队，但他们不是接口程序员。我的公司使用 MVP 策略，产品在接下来的几个月里会发生很大的变化，所以我想使用表格，让 c# 编码人员在需要时轻松进行小改动，而无需在流程中添加接口程序员（团队中的复杂性），我不需要的另一种资源等）。
谈到表格，facebook 广泛使用它，因为它们在大多数情况下更易于操作、更改和维护。我知道，我知道，这是糟糕的代码，但无论如何，代码的存在是为了使业务可行。我是一名数学家，因此我对编程有很多美学感受，但现实是不同的，糟糕的代码，或者世界上最糟糕的代码都会以同样的方式工作，并证明产品创意是否可行，所以如果对我来说可以的话，任何东西都是免费的。如果产品可行，钱就会进来，我可以雇佣一排程序员重新编写所有代码。

标签： html css internet-explorer

【解决方案1】：

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

如果需要，请尝试使用 absolute positioning 和 position:absolute、top、left、right、bottom。

【讨论】：

这不是我问的。我知道关于无表的一切，包括它们更难更改、更难维护以及对于管理内部页面完全没用的事实。
然后使用flexbox 布局。它们的唯一问题是它们仅在较新的浏览器中受支持，但如果它是内部管理的东西，那就没问题了。
您要问的是一个 XY 问题：您要问的是如何使问题的错误解决方案正常工作。不能，这是错误的。我正在提供有效且合适的替代方案。
它是什么？内部管理页面，还是公共页面？
因为它是一个内部管理页面，这意味着只有现代浏览器才能访问它？当然...