IE11中的Flex项目溢出容器

Posted 2023-03-06

【中文标题】IE11中的Flex项目溢出容器

【英文标题】：Flex items overflowing container in IE11

【发布时间】：2017-09-07 06:45:38

【问题描述】：

我的 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"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
</ul>

Chrome 上的结果：

在 IE11 上的结果：

有什么解决方法吗？

【参考方案1】：

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

<ul>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
</ul>

revised fiddle

【参考方案2】：

我不确定，这是不是正确的方法，但你可以试试这个 hack，它有效

您也可以尝试使用modernizr 定位IEbrowsers

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;

<ul class="ie-hack">
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"   ></li>
</ul>

【参考方案3】：

如前所述，IE11 希望子弹性项目设置宽度。您的标记表明您正在尝试在图像上设置高度和宽度。您可以取消图像中的那些高度和宽度属性，然后将您的图像设置为width: 100%。这将允许每个图像占用其父图像的空间，并且仍然根据容器中的数量进行缩放。

或者，如果您不希望这些图像变大，您可以在li 上设置max-width

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"  ></li>
  <li><img src="http://i.imgur.com/60PVLis.png" ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  ></li>
  <li><img src="http://i.imgur.com/60PVLis.png" ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  ></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  ></li>
</ul>