是什么导致IE / FF崩溃宽度：表内的0个内联块但Chrome / Opera没有？

Question

在this question and answer中，我们发现了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 demonstrating this.

Chrome和Opera将忽略width: 0并展开至100％

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

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

Answer 1

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

table {
    width: 300px;
} 

比应用它。 如果您不想设置表格宽度，但希望保持它尽可能小，而不是将样式应用于表格单元格：

table td {
    width: 1px;
}

除IE7外，所有浏览器都会看起来不错。