为什么使用colspan时Internet Explorer 9/10会忽略列宽？

Question

我猜下面的代码可以解释这个问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body { padding-bottom: 24px }
table { table-layout: fixed }
</style>
</head>
<body>

<table class="question" id="TR09_tab" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>
  <col width="22">
  <col width="110">
  <col>
</colgroup>
<tr>
  <td><input name="one" id="one" value="yes" type="checkbox"></td>
  <td colspan="2"><label for="one">Option 1</label></td>
</tr>
<tr>
  <td><input name="two" id="two" value="yes" type="checkbox"></td>
  <td colspan="2"><label for="two">Option 2</label></td>
</tr>
<tr style="display: none">
  <td colspan="2"><label for="text">Text:</label></td>
  <td><input name="text" id="text" type="text" value="" style="width: 98%"></td>
</tr>
</table>

</body>
</html>

问题：第一个列的渲染远大于22px。

注意：我不能为表使用固定宽度，因为在表的下面有一个可变宽度的布局。

第三行设置为display：none，因为一旦选择了其中一个选项，就应立即显示（通过JavaScript）。 一旦显示此行，所有col-widths都是正确的。

在其他情况下使用colspan时，我已经遇到了col-width-definitions和IE的问题-但这是第一次，非跨度单元格的宽度被忽略。

在这种情况下，为什么IE 9/10只会忽略我的colgroup定义？
如果无法更改表结构（例如，我需要这三个列和colspans）， 是否有解决该问题的建议？

非常感谢！

Answer 1

似乎在显示时IE与表结构混淆了display: none在最后一行display: none 。 如果删除该设置，则宽度会改变。 没有该行，该表将违反HTML表模型（如验证器报告的，如果您实际上从标记中删除了该行并告诉验证器进行HTML5验证，则将在其中检测到表模型错误）。

如果您替换display: none则事情发生了变化display: none visibility: collapse ，尽管某些旧版本的IE不支持该设置。

首先，我认为仅计算可见行时表结构应该正确。

为什么使用colspan时Internet Explorer 9/10会忽略列宽？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-04-23 19:58:36

为什么使用colspan时Internet Explorer 9/10会忽略列宽？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-04-23 19:58:36

解决方案1
1 已采纳 2013-04-23 19:58:36