据我所知,如果使用IE10 / IE11,我应该可以使用标准化的flex术语。
我有一个容器div和2个子div。
2个子div不能大于400px,因此应始终有足够的空间容纳justify-content: space-between。
justify-content: space-between
我希望第一个孩子一直在顶部,第二个孩子一直在底部。
这适用于Chrome和Firefox,但不适用于IE,我也不知道为什么。
欢迎任何意见和反馈。
<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>
IE 10和11在正确渲染flexbox时存在许多问题。
这是一个:flex容器min-height在这些浏览器中不尊重该属性。
min-height
一个简单的解决方案是使flex容器也成为flex项。
只需将其添加到您的代码中(无需其他更改):
body { display: flex; flex-direction: column; }