Я создал список с социальными значками. Эти значки должны помещаться на небольших экранах.
Я использую flex-wrap: wrap;
, и он отлично работает в Firefox и Chrome:
Но Internet Explorer 11 (и IE 10) не сломает строку:
Пример кода Pen
Посмотрите код здесь: 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, которая появляется, когда родительский контейнер гибкого элемента установлен на display: table;
. Удаление этой строки устраняет проблему. Но мне нужно display: table;
центрировать родительский контейнер.
Любые идеи о том, как заставить IE11 обертывать изображения?