是什么导致IE / FF崩溃宽度：0表内嵌入块但Chrome / Opera不是？ [英] What is causing IE/FF to collapse width: 0 inline blocks inside tables but Chrome/Opera not to?

问题描述

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

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

 < table> 
< tr> 
< td> 
等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等
将; / TD> 
< / tr> 
< tr> 
< td> 
< div class =fixed-width>< / div> 
< / td> 
< / tr> 
< / table> 
  

with

  .fixed-width {
 background-color：salmon; 
 height：200px; 
 width：200px; 
} 
 
表{
 width：0; 
} 
  

Jsbin证明了这一点。

Chrome和Opera会忽略 width：0 并展开至100％

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

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

解决方案

表格说明如果未设置宽度属性，增加显示表格数据所需的空间。简单的webkit计算它需要100％的可用宽度在单元格内显示长文本（没有人说它应该占用最小宽度 - 这样单元格高度会增加） 。由于你的表格宽度不能被应用，所以没有被考虑。在上面的例子中，如果你使用：

  table {
 width：300px; 
} 
  

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

  table td {
 width：1px; 
} 
  

在除IE7以外的所有浏览器中，这看起来都不错。 b $ b

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?

解决方案

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.

这篇关于是什么导致IE / FF崩溃宽度：0表内嵌入块但Chrome / Opera不是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！