html - IE 11 上的 Flexbox row-reverse 打破了 align-items

Question

此笔在 IE11 和 Chrome 之间的行为不同:https://codepen.io/excelkobayashi/pen/EMgaOE

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

相关 CSS:

.container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
}

预期结果和 Chrome 行为:两个 div 都与父级的顶部对齐。 IE11 结果:两个 div 都与父级的底部对齐。

出于某种原因，IE11 将元素对齐到底部，忽略了 row-reverse 应该将 flex-start 和 flex-end 的位置交换为 align-items 的事实。

但是，我在这里找不到任何说明 IE 应该有所不同的文档，而 IE11 官方文档说它应该与 Chrome 行为相匹配:https://msdn.microsoft.com/en-us/ie/jj127298(v=vs.94)

有什么办法可以解决这个问题吗？

Answer 1

为IE添加margin-top: 0px;

.left, .right
{
    margin: 5px;
    width: 200px;
    height: 200px;
    margin-top: 0px;
}

如果你只想要 IE 而不是其他浏览器，你可以在你的 html 中添加注释样式

    <!--[if IE]>
    <style>
    .left, .right
    {
       margin-top: 0px !important;
    }
    </style>
    <![endif]-->
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>