伪元素与flexbox结合在ie10中消失

Question

我对IE10和flexbox有问题。目前我使用的代码如下面的代码片段。

col 2的内容有一个可变长度（有多个小元素），它应该占用它需要的宽度。我想要在它们之间插入一行。因此，我添加了一个伪元素，通过order将其放在正确的位置，宽度为100％。 Chrome，Firefox等可以渲染这个例子，但是如果我用IE10运行它，伪元素会消失，第二行的内容会移动到第一行。

是不是IE10能够使用flexbox呈现伪元素？你知道一个'黑客'来强制这个休息吗？

/* Container */ 
 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    width: 200px; 
 
} 
 

 
.container:after { 
 
    background-color: #000; 
 
    content: ''; 
 
    height: 2px; 
 
    margin: 5px 0; 
 
    order: 3; 
 
    width: 100%; 
 
} 
 
/* Child */ 
 
.child { 
 
    width: 100px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 
/* Positioning of the childs */ 
 
.c1 { 
 
    order: 1 
 
} 
 

 
.c2 { 
 
    order: 2 
 
} 
 

 
.c3 { 
 
    order: 4 
 
} 
 

 
.c4 { 
 
    order: 5 
 
}

<div class="container"> 
 
    <div class="child c1">row 1 col 1</div> 
 
    <div class="child c2">row 1 col 2</div> 
 
    <div class="child c3">row 2 col 1</div> 
 
    <div class="child c4">row 2 col 2</div> 
 
</div>

Answer 1

您需要添加此样式.container在IE10的工作：

display: -ms-flexbox; 
-ms-flex-wrap: wrap;