IE10 表格布局：修复了使用 colspan 时损坏的问题答案

【问题标题】：IE10 table-layout:fixed broken if colspan is usedIE10 表格布局：修复了使用 colspan 时损坏的问题
【发布时间】：2013-02-22 21:18:43
【问题描述】：

以下 HTML 在包括 IE7-9 在内的所有常见浏览器中完美呈现，但在 IE10 中失败。即使在兼容模式下运行 IE10 也会失败。

<html>
    <body>
        <table style="table-layout:fixed;width:500px">
        <colgroup>
            <col style="width:100px" ></col>
            <col ></col>
            <col style="width:100px" ></col>
            <col ></col>
        </colgroup>
        <tbody>
            <tr>
                <td colspan="2">
                    <div style="background:red;"> red </div>
                </td>
                <td colspan="2">
                    <div style="background:green;"> green </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

虽然在所有其他浏览器中，两个单元格的大小相等，但在 IE10（至少在 Windows7 上运行时），第一个单元格比第二个单元格宽。

IE 9/Windows 7 中的 HTML：

IE 10/Windows 7 中的相同 HTML：

测试页：http://www.dinkypage.com/167605

报告的错误：https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

有人知道这个问题的解决方案/解决方法吗？

更新：我要求微软重新打开我报告的错误，因为它违反了 w3c 标准。答案是：

“您报告的问题是设计使然。Internet Explorer 仅使用第一组 TD 标记来设置列的宽度。”。

w3c 标准 (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) 说：

在固定表格布局算法中，每一列的宽度是这样确定的：

“width”属性值不是“auto”的列元素设置该列的宽度。

否则，第一行中“width”属性值不是“auto”的单元格将确定该列的宽度。如果单元格跨越多于一列，则宽度将按列划分。

任何剩余的列均分剩余的水平表空间（减去边框或单元格间距）。

也就是说，这个功能在 IE 10 中被设计破坏了。我建议使用不同的浏览器或继续使用 IE 9...

【问题讨论】：

Windows 8 上的 IE 10 也存在同样的问题
问题也存在，如果所有都有定义的宽度...
Microsoft 自己声明如果使用 table-layout:fixed，则 colgroup 定义列的宽度 - 请参阅 msdn.microsoft.com/de-de/library/ie/ms531161(v=vs.85).aspx
Microsoft 不幸地将 Connect 中的大多数错误标记为“设计使然”，除非他们计划修复它们。他们认为（尽管这个概念失败了）正确地表明这个 [airquote] 有效[/airquote] “按照设计”，它们并不“看起来很糟糕”。可悲的是，这只是让开发人员觉得微软似乎丝毫没有解决这些问题的动机……但我离题了……
IE10 也有同样的问题。 table-layout:fixed 突然使我们所有的桌子都宽了一英里。我们过去常常在 th 标签上指定固定宽度，这在 IE10 之前都可以正常工作。

标签： html html-table internet-explorer-10

【解决方案1】：

我目前的解决方法是以下样式：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  table colgroup { display: table-row; }
  table colgroup col { display: table-cell; }
}

这使得浏览器像 tr/td 一样处理 colgroup/col 并且类似于 Teemu 的建议（但没有丑陋的 html hacks）。媒体选择器使 css 仅对 IE10+ 可见

【讨论】：

【解决方案2】：

我遇到了这个，实际上是在 IE9 中。事实上，我发现的唯一解决方案是在表中放置一个隐藏的虚拟第一行：

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

然后，为了消除由此产生的差距，我将负边距顶部应用于整个表格。不优雅，但它似乎完成了工作。

【讨论】：

我对此有点疑惑，因为我们以前在 IE9 中从未遇到过此类问题 - 我编写的示例在 IE9（以及除 IE10 之外的所有其他浏览器）中有效。
很难解决它，因为你的 HTML 中有很多其他相关的错误。通过验证器输入你的代码，你就会明白我的意思了。

【解决方案3】：

我通常是这样的

<colgroup width="100%"> // for table a whole
    <col width="50%">   // for each column
    <col width="50%">
</colgroup>

2 列 50%，3 列 33%，以此类推

这适用于 IE10。

【讨论】：