9

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

在 IE 9 中

IE 10/Windows 7 中的相同 HTML：

在 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）说：

在固定表格布局算法中，每列的宽度确定如下：

  1. 'width' 属性的值不是 'auto' 的列元素设置该列的宽度。
  2. 否则，第一行中 'width' 属性的值不是 'auto' 的单元格将确定该列的宽度。如果单元格跨越多列，则宽度将按列划分。
  3. 任何剩余的列均分剩余的水平表空间（减去边框或单元格间距）。

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

4

3 回答 3

5

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

@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+ 可见

于 2013-03-12T08:07:52.010 回答
3

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

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

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

于 2013-03-27T09:26:50.983 回答
1

我通常这样做

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

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

这适用于 IE10。

于 2015-04-29T08:07:16.087 回答