2

在这个问答中，我们发现了 Blink 和 Firefox/IE 之间的一个有趣的区别。规范的哪一部分涉及这个问题，谁做的正确？

假设您有一个包含 1 列和 2 行的表。第 1 行有一堆内联文本，第 2 行有一个固定宽度的块。

  <table>
    <tr>
      <td>
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </td>
    </tr>
    <tr>
      <td>
        <div class="fixed-width"></div>        
      </td>
    </tr>
  </table>

和

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
}

table {
  width:0;
}

Jsbin 演示了这一点。

Chrome 和 Opera 将忽略width: 0并扩展到 100%

Chrome 忽略宽度设置

Firefox 和 IE 11 会将表格折叠成尽可能小的宽度。

IE 11 尽力应用它

这是 Blink/webkit 或 IE/FF 缺少规范的情况吗？此行为未指定吗？

4

1 回答 1

1

表格规范说，If the width attribute is not set, a table takes up the space it needs to display the table data.Simply webkit 计算它需要 100% 的可用宽度才能在单元格内显示长文本（没有人说它应该采用最小宽度 - 这样单元格高度会增加）。由于您的表格宽度无法应用，因此不予考虑。在上面的示例中，如果您使用：

table {
    width: 300px;
}

比它会被应用。如果您不想设置表格宽度，但希望尽可能小，则可以将样式应用于表格单元格：

table td {
    width: 1px;
}

这在除 IE7 之外的所有浏览器中看起来都不错。

于 2014-02-11T13:42:19.907 回答