css - 如果父级设置了宽度，IE7 图像将不会 self 约束

Question

我有一个渐变图像，用作可变高度容器的背景。基本结构很简单(比这个更复杂，但仅供引用):

<div class="parent">
    <img src="..." style="width: 100%;height:100%;">
    <div class="content">
        content goes here
    </div>
</div>

在每个浏览器中都运行良好，直到我向 .parent 添加一个明确的宽度，然后猜猜哪个浏览器会阻塞？ IE7!我非常喜欢 IE7!

发生的事情是图像比例现在重置，使其成为 960x960 因为我的 .parent 是 960px 宽。基本上它似乎忽略了 height:100%

我设置了一个 fiddle 来显示确切的问题:

http://jsfiddle.net/SsYSv/2/

感谢任何帮助:)

Answer 1

所以我修改了我的答案，

基本上围绕包含的 div .banner 包装一个 div 并将宽度设置为该 div。

http://jsfiddle.net/SsYSv/6/

<!--[if IE 7]><div class="ieBanner"><![endif]-->
     ...
<!--[if IE 7]></div><![endif]-->

.ieBanner
{
    width:400px;
}