css - 图像的最大宽度属性应该在计算其包含的表格单元格的大小之前还是之后应用？

Question

考虑以下代码 ( jsfiddle ):

<table>
    <tr>
        <td>
            <img 
                src=some-image.png
                style="max-width: 100%;"
            >
        </td>
        <td style="
            width: 100%; 
            background: yellow;
        ">
            the second cell
        </td>
    </tr>
</table>

Firefox 33 和 Internet Explorer 11 以一种方式呈现，而 Chrome 38 以不同的方式呈现。在 FF/IE 中，图像以其自然大小显示。在 Chrome 中，图像完全消失(缩小到被遗忘)。

在我看来，当在自动调整大小的表格单元格的上下文中提供时，浏览器不同意 max-width 的含义，其中单元格是表格的一部分，其宽度超过 window 。我本来希望在应用“最大宽度”属性之前计算图像单元格的宽度。

我意识到这是一个完全人为的例子。我不是在寻找解决方法；我问是因为我只是想了解 CSS 规则的极端情况。

当涉及到百分比时，CSS 定义了一些关于框大小和布局计算顺序的非常具体的规则。知道这里发生了什么吗？哪个浏览器合适？

Answer 1

提供这个作为答案:

From the spec ，关于具有百分比值的最大宽度:

If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.