我的flex容器具有水平项目列表,除了IE11之外,所有浏览器都能正确显示它们在其父级内部。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>
有什么解决方法吗?