本文介绍了IE浏览器的CSS错误:影响父母身高的IMG原始高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个PARENT flexbox div(它也是列flexbox的一部分):
div.flex_block {
宽度:100%;
flex:1 1 auto;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
padding-bottom:30px;
$ / code>
包含2个孩子:
.flex_block .content {
max-width:none; / *覆盖其他代码* /
flex:0 1 50%;
}
.flex_block .image {
最大宽度:无; / *覆盖其他代码* /
flex:0 1 35%;
$ / code>
第一个孩子里面有一些文字。
第二个有一个超大的图像,设置为100%的宽度,所以它收缩到它的容器。
.flex_block .image img {
display:block;
宽度:100%;
height:auto;
}
在Chrome浏览器中按预期工作,但在IE中,原始img的高度似乎展开PARENT容器(即使缩小以适应其容器)。
如果我设置了img的高度,问题就解决了。 AUTO不能解决它。
我需要这个作为一个响应式设计,显然,所以我不希望以像素为单位设置高度。