DIV不跟随调整大小的图像宽度

Question

DIV不跟随调整大小的图像宽度

4

由于某种原因，FireFox在图像高度缩放且宽度属性设置为auto时，似乎无法调整浮动div的宽度。但在Chrome中，它按预期工作。

Rendering

js-fiddle无法正确渲染它，因此这里是代码：

<STYLE>
div {
    border: solid 1px green;
}
.container {
   height:400px;
   width:300px;
}

.holder{
    border: solid 1px blue;
    float:right;
}
.resized {
    height:90%;
}
</STYLE>
<div class="container">
    <div class="holder">
        <img class="resized" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAACPAgMAAADM7sDzAAAACVBMVEXMzMz+/v7///9Fv2/IAAAA7ElEQVRIS+3OMWrDQBAF0L9LNERbJRCDpNoGSaeY2tU2blK5SJVT6Ah7hCGkcOaUKRzv7gRsSBNM4t89+Mx84C9mgmAXazp9L2Qh7jPHRVpQYZQOnjMfLvLJ8t6ysZed/evMqtGZzbdcYVQmDGcZMPFzzZG3htHyMRiuLHvLO0ucp8ol/lYC0Oww63LkwHjVlLlilxDHU3mzeAYy94lQMe0JyKfcsibMkslrwiynstcDAZmkH54LGzQuFbagelUHz/XmW64vPWirb6qHIwltqOi5CwDkq+zSS03EaLjhoFI4WAaY8k/57VTNf5VPpH1Mhhj2avwAAAAASUVORK5CYII=">
    </div>
        <div>
            LOL, div.. Div Div Div Div Div Div Div Div Div Div Div 
        </div>
</div>

- Zinob

我刚在Safari和Chrome上测试了一下，看起来完全相同。 - Dan Beaulieu

在这种情况下，我个人喜欢将我的内容放入两个容器中，就像这样：http://jsfiddle.net/fake060a/1/，然后你可以让容器来管理你的对象如何显示。 - Dan Beaulieu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zinob · Accepted Answer

这似乎是由于怪异模式渲染中的奇特之处所致。解决方案很简单，只需在文档开头添加<!DOCTYPE html>以强制使用严格的HTML5，并将图像高度设置为100％，将“holder”的高度设置为90％（以便图像容器获得正确的大小并使图像占据该高度的100％）。感谢 Mozilla 的友好人员指出这一点。 文档的结果头部：

<!DOCTYPE html>
<STYLE>
div {
    border: solid 1px green;
}
.container {
   height:400px;
   width:300px;
}

.holder{
    border: solid 1px blue;
    float:right;
    height: 90%;
}
.resized {
    height:100%;
}