百分比高度不会被忽略

Question

考虑两个HTML

[1]：

<div style="height:100%">
    <div style="height:50%">
        <img src=test.jpg style="height:200%; width:100%" />
    </div>
</div>

[2]：

<div>
    <div>
        <img src=test.jpg style="width:100%" />
    </div>
</div>

chrome的屏幕截图：http://imgur.com/2cUvNCS

JSFiddle链接（感谢Sujay）：http://jsfiddle.net/H8ZNc/show/light/

据我所知，在[1]中，img标签看起来从其父级解析高度。该父级也以百分比（50％）指定，因此它应该再次上升，直到它发现没有指定非百分比高度。所以它应该忽略所有的高度并且表现得像[2]。

我看到问题Percentage Height HTML 5/CSS @bobince提到了＃34;虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。＆＃34;我想知道这里到底发生了什么。

值得注意的是，在Firefox中，像[2]这样呈现的HTML都是在Chrome中呈现的。