IE10表格布局:如果使用了colspan,则修复已损坏
Mic*_*raz 9 html html-table internet-explorer-10
以下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 10/Windows 7中的相同HTML:
测试页面:http://www.dinkypage.com/167605
有谁知道这个问题的解决方案/解决方法？
更新:我要求微软重新打开我报告的错误,因为它违反了w3c标准.答案是:
"您报告的问题是设计的.Internet Explorer仅使用第一组TD标记来设置列的宽度."
w3c标准(http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout)说:
在固定表格布局算法中,每列的宽度确定如下:
- "width"属性的值为"auto"的列元素设置该列的宽度.
- 否则,第一行中具有"width"属性的"auto"值以外的值的单元格将确定该列的宽度.如果单元格跨越多个列,则宽度将在列上分割.
- 任何剩余的列均等地划分剩余的水平表空间(减去边框或单元格间距).
这意味着,此功能在IE 10中被设计破坏.我建议使用不同的浏览器或使用IE 9 ...
我目前的解决方法是以下样式:
@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 +可见