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

Question

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

Chrome、Internet Explorer、Safari 和 Opera 都呈现相同的表格，无论它是 block div 元素还是内联 block div 元素的子元素，这正是我所期望的。示例:

另一方面，当包含的 div 的显示属性为 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):

The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

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

Answer 1

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

非内联 block 没有收缩包装宽度，因此上述内容不适用；该 block 与页面主体一样宽，然后将表格放在其中。此时祖先宽度已知，因此可以应用百分比宽度。

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