IE11中的Flex项目溢出容器
Posted
技术标签:
【中文标题】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
定位IE
browsers
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>
【讨论】:
以上是关于IE11中的Flex项目溢出容器的主要内容,如果未能解决你的问题,请参考以下文章