那些遇到过的问题

小编Mic*_*raz的帖子

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

以下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>
Run Code Online (Sandbox Code Playgroud)

在所有其他浏览器中,2个单元的大小相等,在IE10上(至少在Windows7上运行时),第一个单元格比第二个单元格宽.

IE 9/Windows 7中的这个HTML:

在IE 9中

IE 10/Windows 7中的相同HTML:

在IE 10中

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

报告的bug: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 ...

html html-table internet-explorer-10

Mic*_*raz
2017 10-09
9
推荐指数
1
解决办法
1万
查看次数

标签 统计

html ×1

html-table ×1

internet-explorer-10 ×1