Question

据我所知，如果使用IE10 / IE11，我应该可以使用标准化的弹性条款。

我有一个容器div和2个子div。

2个子div不大于400px，因此justify-content: space-between应该有足够的空间。

我希望第一个孩子一直在顶部，第二个孩子一直在底部。

这适用于Chrome和Firefox，但不适用于IE，我不知道为什么。

欢迎提出任何意见和反馈。

＆＃13;

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

＆＃13;

https://jsfiddle.net/akxn68vm/

Answer 1

IE 10＆amp; 11正确渲染flexbox有很多问题。

以下是：Flex容器不尊重这些浏览器中的min-height属性。

一个简单的解决方案是使您的Flex容器也成为弹性项目。

只需将其添加到您的代码中（无需其他更改）：

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

更多信息：https://github.com/philipwalton/flexbugs#flexbug-3

Answer 2

根据this bug IE11在flexbox中使用min-height时无法正确呈现项目。

似乎问题已在Edge中解决，但IE10-11无效。

Answer 3

这是IE10 / 11中的错误。您可以在https://github.com/philipwalton/flexbugs#flexbug-3

中找到相关信息

要修复IE10 / 11中的此错误，请在本身就是flex容器的flex容器周围添加包装元素。在您的示例中，您可以将display flex添加到body标签。并在容器div中添加宽度为100％的样式

在IE中忽略了flex容器min-height

3 个答案: