gpt4 book ai didi

css - IE11 中的 Flex 元素溢出容器

转载 作者:技术小花猫 更新时间:2023-10-29 10:26:12 25 4
gpt4 key购买 nike

我的 flex 容器有一个水平元素列表,除了 IE11 之外,所有浏览器都可以在其父级中正确显示这些元素,这似乎无法将它们保留在其中,而是“流出”它,就像这样:

enter image description here

下面是一个简化的 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>

Chrome 上的结果: enter image description here

IE11 上的结果: enter image description here

任何解决方法?

最佳答案

看起来 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>

revised fiddle

关于css - IE11 中的 Flex 元素溢出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43353398/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com