Flexbox/IE11：flex-wrap：包裹不包裹（图片+ Codepen里面）

Question

我创建了一个包含社交图标的列表。这些图标应该包装在小屏幕上。

我用flex-wrap: wrap;和它完美的作品在Firefox和Chrome：

不过IE 11（和IE 10）不会打破行：

代码笔示例

查看此代码：http://codepen.io/dash/pen/PqOJrG

HTML代码

<div> 
    <ul> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> 
    </ul> 
</div> 

CSS代码

body {background: #000;} 

div { 
    background: rgba(255, 255, 255, .06); 
    display: table; 
    padding: 15px; 
    margin: 50px auto 0; 
} 

ul { 
     display: -webkit-flex; 
     display: -ms-flexbox; 
    display: flex; 
     -webkit-flex-wrap: wrap; 
     -ms-flex-flow: row wrap; 
    flex-wrap: wrap; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
    justify-content: center; 
    list-style: none; 
    padding: 0; 
} 

li { 
    background: purple; 
    margin: 4px; 
} 

img { 
    display: block; 
    height: 40px; 
    padding: 7px; 
    width: 40px; 
} 

这似乎是一个IE错误，这显示了当Flex元素的父容器设置为display: table;。删除这条线可以解决问题。但我需要display: table;来居中父容器。

任何想法如何让IE11包装图像？

Answer 1

尝试定义父容器的宽度，例如width: 20%;。因此，容器将被格式化，并且flex-wrap将会工作。是的，你可以删除display: table;。