僞元素與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;