在IE11中Flex容器溢出容器

时间:2017-04-11 18:15:00

标签: css css3 internet-explorer flexbox

我的弹性容器有一个水平的项目列表,所有浏览器都在其父级内正确显示,除了IE11,它们似乎无法将它们保留在其中,而是它们排出"#34;它,就像这样:

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>
&#13;
&#13;
&#13;

Chrome上的结果: enter image description here

IE11上的结果: enter image description here

任何解决方法?

3 个答案:

答案 0 :(得分:8)

看起来IE11要求您定义弹性项目的大小(li):

&#13;
&#13;
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;
&#13;
&#13;

revised fiddle

答案 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>