html - colspan + 固定宽度内容影响td宽度

Question

我对 colspan 的理解或在 HTML 表格中实现 colspan 的浏览器有问题。请参阅以下示例:

td {
  border: 1px solid red;
}

<table>
  <tr>
    <td id="upper-td" colspan="2">
      <div style="width:500px">colspan</div>
    </td>
  </tr>
  <tr>
    <td id="broken-td">col 1</td>
    <td id="fullwidth-td" style="width:100%">col 2</td>
  </tr>
</table>

根据我的理解，由于 colspan=2，#upper-td 不应影响下部 td 的宽度。这就是 Firefox 中发生的情况。

在 Chrome、IE11 和 Edge 中，#broken-td 的 offsetWidth 为 250px(确切地说，宽度为 248px，左右内边距为 1px)。这恰好是 #upper-td 内容宽度的一半(我使用多个宽度进行了测试，并且保持了这个比例)。

有人可以解释一下这种行为吗？

解决方法是设置 #broken-td{width:0} (适用于 IE，不适用于 Chrome)或 #broken-td{width:1%} (适用于 Chrome，不适用于 IE)。但用户代理嗅探解决方法是我最不想引入到我们的代码库中的东西。

Answer 1

我认为 Firefox 可以正确渲染它，看起来像是 Chrome 和 IE 中的一个错误，但对此不确定。作为解决方法，使用 <col> 元素似乎在不同的浏览器上运行良好。

<强> jsFiddle

td {
  border: 1px solid red;
}
table {
  width: 100%;
}
.col-1 {
  width: 1px;
}

<table>
  <col class="col-1">
  <col class="col-2">
  <tr>
    <td id="upper-td" colspan="2">
      <div style="width:500px">colspan</div>
    </td>
  </tr>
  <tr>
    <td id="broken-td">col 1</td>
    <td id="fullwidth-td">col 2</td>
  </tr>
</table>