我的flex容器有一个水平列表的项目,所有的浏览器都显示在他们的父母之外,除了IE11,这似乎不能保持在它的内部,而是“渗出”它,如：
以下是我的设置的简化Fiddle,它演示了操作中的问题：
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 200px;
border: 1px dashed red;
}
li img {
max-width: 100%;
height: auto;
}
<ul> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> </ul>
任何解决方法？
解决方法
看起来IE11需要您定义Flex项目的大小(li)：
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 200px;
border: 1px dashed red;
}
li { /* NEW */
flex: 0 1 100%; /* flex-grow,flex-shrink,flex-basis */
/* flex: 1 */ /* alternatively,this also works (short for: fg:1,fs:1,fb:0px) */
}
li img {
max-width: 100%;
height: auto;
}
<ul> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> </ul>
