Question

如果您使用Internet Explorer 11查看this page，则可以看到图像的纵横比不正确-图像被垂直拉伸。 IE 11顽固地显示图像的原始高度。所有其他浏览器（最新的Chrome，Firefox和Edge版本）正确显示。为什么此CSS代码不适用于IE 11？

html：

<section class="content-6 sec-content">
<div class="container sec-right">
<div>
<img src="https://eoy.ee/oosorr/images/8.jpg" alt="Nõmmemännik" width="1280" height="853" />
</div>
</div>
</section>

css：

img {
width:100%;
height:auto;
max-width: 100%;
}

.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-right > div{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
padding:35px 45px;
position: relative;
z-index: 10;
width: 90%;
}

.sec-right > div::before {
background: rgba(0,0,0,0.4);
content:" ";
top:0;
bottom:0;
width:3000px;
position: absolute;
z-index: -100;
}

.sec-right > div::before {
left: 0;
}

Answer 1

根据this discussion，IE flexbox实施似乎存在一个错误，可以通过在图像CSS样式中添加以下代码来解决该问题：

img {
    ...
    min-height: 1px;
}

Answer 2

Piotr链接非常有用-min-height:1px solved the problem.并没有帮助，后来我将其添加到img，但添加到了.sec-content > div。我稍微删除了flexbox属性。最后的CSS：

.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
    min-height: 1px;
}

.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-right > div{
padding:35px 45px;
position: relative;
z-index: 10;
width: 100%;
}

Answer 3

我猜想它正在拉伸图像，因为align-self的默认值为拉伸。尝试设置align-self：center;在图片上

align-self: center;

还应该从标记中删除height属性。

如何强制Internet Explorer 11正确显示图像长宽比？

3 个答案: