gpt4 book ai didi

html - DIV 不遵循调整后图像的宽度

转载 作者:搜寻专家 更新时间:2023-10-31 08:54:20 24 4
gpt4 key购买 nike

由于某些原因,当图像按高度缩放且宽度属性设置为自动时,FireFox 似乎不会调整 float 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>

最佳答案

这显然是由于怪癖模式渲染中的一个奇怪现象。解决方案只是通过添加 <!DOCTYPE html> 来强制使用 strict-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 不遵循调整后图像的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30276871/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com