IE 11中不取图像子高度的Flex项目

Question

我在尝试这个：

​

html,body{
    background-color: black;
    margin: 0;
    padding: 0;
}

.wp {
    margin: 20px auto;
    width: 300px;
}

.a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 2px solid red;
}

.ai {
    width: 100%;
}

.im {
    outline: 2px solid yellow;
}

<div class="wp">
    <div class="a">

        <div class="ai">
            <img class="im" width="100%" src="https://www.nasaspaceflight.com/wp-content/uploads/2018/10/2018-10-22-13_27_15-Window.jpg">
        </div>
    </div>
</div>

​

我得到了不同的结果在边缘与IE 11：

​

​

在图像中，左边的是边缘，右边的是IE11。

我尝试过将img包含在div中，就像柔虫建议的那样，但是我得到了相同的结果。

对如何修复IE11版本有什么想法吗？

Answer 1

在本例中，IE11的问题似乎是，在呈现过程中，flex (.ai)获取图像(877 to )的内在高度，然后停止响应。

缩小图像大小的width: 100%命令似乎是在flex项大小之后出现的，但是IE11已经完成了。

我会使用flex-direction: row来解决这个问题。

另外，要消除图像下面的小间隙，请参见下面的文章：图像标签下的神秘空白

Answer 2

IE中的Flex问题是一个常见的问题，而且display: flex;不是一个被广泛覆盖的属性。尝试以下选项：

.a { flex: 1; }

或者父母。

.wp { width: 100%; } // or 80%

这应该能解决问题。

如果要保留.wp 300 If，请尝试以下操作。为.wp添加一个额外的父级，并将其设置为300 to，并将.wp设置为100%：

<div class="wp-parent">
    <div class="wp">
        <div class="a">
            <div class="ai">
                <img class="im" width="100%" src="/2018-10-22-13_27_15-Window.jpg">
            </div>
        </div>
    </div>
</div>

CSS

.wp-parent { 
    width: 300px; 
}

.wp { 
    width: 100%; 
}