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>

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

图中左边是EDGE，右边是IE11

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

关于如何修复 IE11 版本的任何想法？

Answer 1

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

.a { flex: 1; }

或 parent.

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

这应该可以解决问题。

如果您想保持 .wp 300 像素，请尝试以下操作。为 .wp 添加一个额外的 parent 并将其设置为 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 的问题似乎是弹性项目 (.ai) 在渲染过程中占用了图像的固有高度 (877px)，然后停止响应。

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

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

此外，要删除图像下方的小间隙，请参阅此 post：

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

Flex item not taking height of image child in IE 11

css

flexbox

internet-explorer-11

microsoft-edge