Firefox正在缩小内联块div中的表格。这里发生了什么？

Question

我需要在内联块div元素中显示一个表。

Chrome，Internet Explorer，Safari和Opera都会使表格相同，无论它是块div元素的子元素还是内联块div元素，这都是我所期望的。例如：

另一方面，当包含div的display属性为inline-block时，Firefox会缩小表格。例如：

JSFiddle ：http://jsfiddle.net/PvZ2d/7/

标记：

table {
    table-layout: fixed;
}
td {
    background: red;
    width: 33%;
}

<div>
    <table>
        <tbody>
            <td>Content</td>
            <td>More Content</td>
            <td>Even More Content</td>
        </tbody>
    </table>
</div>
<div style="display:inline-block;">
    <table>
        <tbody>
            <td>Content</td>
            <td>More Content</td>
            <td>Even More Content</td>
        </tbody>
    </table>
</div>
<br />
<div style="display:inline-block;">
    <table>
        <tbody>
            <td style="white-space:nowrap;">Content</td>
            <td style="white-space:nowrap;">More Content</td>
            <td style="white-space:nowrap;">Even More Content</td>
        </tbody>
    </table>
</div>

问题：我该如何解决这个问题？这是Firefox中的错误吗？

根据规范（http://www.w3.org/TR/CSS2/visuren.html#propdef-display）：

  

内联块的内部格式化为块框，并且   元素本身被格式化为原子内联级别框。

鉴于此，我不明白为什么将display属性更改为inline-block会改变子元素的布局。

Answer 1

在收缩包装的情况下，内联块的宽度应该是表的首选宽度，在Firefox中似乎是列的首选宽度的总和;在这个阶段，百分比宽度被忽略，因为没有任何东西可以是百分比。

非内联块没有收缩包装宽度，因此上述内容不适用;块与页面主体一样宽，然后将桌子放在里面。此时，祖先宽度是已知的，因此可以应用百分比宽度。

规范没有在这种情况下指定渲染，所以很遗憾很难说任何特定的渲染是对还是错。