我的弹性容器有一个水平的项目列表,所有浏览器都在其父级内正确显示,除了IE11,它们似乎无法将它们保留在其中,而是它们排出"#34;它,就像这样:
以下是我的设置的简化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>
&#13;
任何解决方法?
答案 0 :(得分:8)
看起来IE11要求您定义弹性项目的大小(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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
我不确定,是不是正确的方法,但你可以试试这个黑客,它有效
您也可以使用timeOut = 10
connectionSocket.settimeout(timeOut)
while 1:
sentence = connectionSocket.recv(1024)
if sentence.decode() == 'active':
#reset the timer of settimeout()
来定位modernizr
浏览器
IE
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 200px;
border: 1px dashed red;
}
_:-ms-fullscreen .ie-hack li,
:root .ie-hack li {
display: flex;
}
li img {
display: block;
max-width: 100%;
height: auto;
}
答案 2 :(得分:0)
正如已经提到的,IE11希望子弹性项具有宽度设置。您的标记显示您正在尝试在图像上设置高度和宽度。您可以在图像中取消这些高度和宽度属性,然后将图像设置为width: 100%
。这将允许每个图像占用其父级的空间,并仍然根据容器中的数量进行缩放。
或者,如果您不希望这些图片变大,可以在max-width
上设置li
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 200px;
border: 1px dashed red;
}
li {
flex-grow: 1;
flex-shrink: 1;
/* max-width: 50px; for keeping image from ever getting larger than certain point */
}
li img {
width: 100%;
}
<ul>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
<li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
</ul>