css – Flexbox / IE11：flex-wrap：wrap不包裝(Image Codepen裡面)

摘要： 我建立了一個列有社交圖示的列表.那些圖示應該放在小螢幕上. 我使用flex-wrap：wrap;它在Firefox和Chrome中完美無缺： 但Internet Explorer 11(和IE 10)不會打破這一行： 程式碼筆示例 檢視程式碼：http://codep...

我建立了一個列有社交圖示的列表.那些圖示應該放在小螢幕上.

我使用flex-wrap：wrap;它在Firefox和Chrome中完美無缺：

但Internet Explorer 11(和IE 10)不會打破這一行：

程式碼筆示例

檢視程式碼：ofollow,noindex" target="_blank">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元素的父容器設定為顯示：刪除此行可以解決問題.但我需要顯示：table;將父容器集中.

任何想法如何讓IE11包裝影象？