Flex 项目在 IE 11 中不占用图像子项的高度

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>

我在 EDGE 与 IE 11 中得到不同的结果：

图中左边是EDGE，右边是IE11。

我尝试按照Flexbugs 的建议在div 中包含img，但得到了相同的结果。

任何想法如何修复 IE11 版本？

Answer 1

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

.a { flex: 1; }

或父母。

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

这应该可以解决问题。

---

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

HTML

<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%; 
}

Answer 2

在这种情况下，IE11 的问题似乎是 flex 项 (.ai) 在渲染过程中采用了图像的固有高度 (877px)，然后停止响应。

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

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

另外，要消除图像下方的小间隙，请参阅此帖子：Mystery white space underneath image tag