What is causing IE/FF to collapse width: 0 inline blocks inside tables but Chrome/Opera not to?

问题

In this question and answer we uncovered an interesting difference between Blink and Firefox/IE. What part of the spec concerns this issue and who is doing it correctly?

Suppose you have a table with 1 column and 2 rows. Row 1 has a bunch of inline text, and row 2 has a fixed width block.

  <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>

with

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

table {
  width:0;
}

Jsbin demonstrating this.

Chrome and Opera will ignore the width: 0 and expand to 100%

Firefox and IE 11 will collapse the table to be as small width as possible.

Is this a case of Blink/webkit or IE/FF missing the spec? Is this behavior unspecified?

回答1:

Table specifications says If the width attribute is not set, a table takes up the space it needs to display the table data. Simply webkit calculates it needs 100% available width to display long text inside the cells (noone says it should take minimum width - that way cell height would increase). Since your table width cannot be applied than it is not considered. In the example above, if you use:

table {
    width: 300px;
}

than it will be applied. In case you do not want to set table width, but want to keep it as small as it can be, than apply style to table-cell instead:

table td {
    width: 1px;
}

This will look good in all the browsers except IE7.

来源：https://stackoverflow.com/questions/21357467/what-is-causing-ie-ff-to-collapse-width-0-inline-blocks-inside-tables-but-chrom

标签

html

css

webkit

blink