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-width都是完全正确的。

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

为什么IE 9/10在这种情况下只是忽略我的colgroup定义？
解决问题的任何建议如果我无法更改表格结构（即我需要这三个colums和colspans）？

非常感谢！

Answer 1

当你在最后一行有display: none时，IE似乎与表结构混淆了。如果删除该设置，则宽度会发生变化。如果没有该行，该表将违反HTML表模型（如果您实际从标记中删除该行并告诉验证程序执行HTML5验证，则会检测到表模型错误，因此验证程序会报告验证程序。）

如果您将display: none替换为visibility: collapse，情况会发生变化，但某些旧版本的IE不支持该设置。

最重要的是，我认为只有在计算可见行时，表结构应该是正确的。

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

1 个答案: