У меня есть скобка ul > li > a > img
, и я использую flexbox для выравнивания всех элементов списка до одной строки, в то время как изображения поддерживают их соотношение сторон.
Как выглядит в Chrome 45, Firefox 40, Safari 8, Opera 28 и Край
Итак, моя проблема в том, что я пытаюсь добиться в IE того же поведения, что и в Chrome и Firefox.
Мой SASS/SCSS
ul.images {
float: left;
clear: both;
width: 100%;
min-height: auto; // Required for Firefox
padding: 0;
margin: 0;
border: 1px solid yellow;
display: -webkit-flex;
-webkit-flex-direction: row;
display: -ms-flexbox;
-ms-flex-direction: row;
display: flex;
flex-direction: row;
li {
border: 2px solid green;
flex: 1 1 auto;
width: auto;
min-width: 0; // Required by Firefox
max-width: 100%;
max-height: auto;
img {
float: left; // Removes phantom margin
width: auto;
max-width: 100%;
height: auto;
max-height: 100px;
}
}
}
Здесь CodePen для тех, кто хочет более подробного просмотра.