html - 浮动 div 内的 img - div 不随图像宽度拉伸

Question

我在 Firefox 中面临一个奇怪的情况。我的 HTML 设置如下：

<div class="tab">
    <div class="imageContainer">
        <img src="some-url" class="image" /> 
    </div>
</div>

.tab {
    height: 600px;
    width: 100%; // The document width, 
    overflow: auto;
}

.imageContainer {
    float: left;
    height: 100%;
    max-width: 50%; 
    overflow: hidden;
}

.image {
    height: 100%;
}

原始图像的宽度是400 px，当height:100%应用在图像上时，它会增加到 600 px。通常，容器 div 应与图像一起拉伸到 600 像素。在 Firefox (20.0.1) 上，imageContainer div的宽度设置为 400 像素，但图像会拉伸。在我的max-width:50%测试用例中产生的最大值为 700 像素。

在 Chrome 和 IE 上，这没有任何问题。如何解决这个问题？

编辑：这是一个解释情况的jsfiddle：http: //jsfiddle.net/dSr7s/