Question

出于某种原因，当图像在高度上缩放并且width属性设置为auto时，FireFox似乎不会调整浮动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>

Answer 1

这显然是由于怪异模式渲染中的奇怪。解决方案只是强制严格HTML5，将<!DOCTYPE html>添加到文档的开头，将图像高度设置为100％，并将＃34; holder＆＃34;的高度设置为至90％（使图像容器的尺寸合适，图像达到该高度的100％）。感谢nice folks at 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%;
}

DIV不遵循已调整大小的图像的宽度

1 个答案: