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

出于某种原因,当图像在高度上缩放并且width属性设置为auto时,FireFox似乎不会调整浮动div的宽度.它虽然可以在Chrome中运行.

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>

解决方法

这显然是由于怪癖模式渲染中的奇怪.解决方案只是通过添加<！DOCTYPE html>来强制严格HTML5.到文档的开头,将图像高度设置为100％,将“holder”的高度设置为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%;
}

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

解决方法

相关文章