Question

以下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>

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

IE 9 / Windows 7中的HTML：

In IE 9

IE 10 / Windows 7中的相同HTML：

In IE 10

测试页：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 ...

Answer 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黑客攻击）。媒体选择器使css仅对IE10 +

可见

Answer 2

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

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

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

Answer 3

我通常会这样做

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

2列50％，3％33％等

这适用于IE10。

IE10表格布局：如果使用了colspan，则修复已损坏

3 个答案: