css – Flex11在IE11中溢出容器

前端之家收集整理的这篇文章主要介绍了css – Flex11在IE11中溢出容器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的flex容器有一个水平列表的项目,所有的浏览器都显示在他们的父母之外,除了IE11,这似乎不能保持在它的内部,而是“渗出”它,如:

以下是我的设置的简化Fiddle,它演示了操作中的问题:

@H_502_6@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; } @H_502_6@<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的结果:

IE11结果:

任何解决方法

解决方法

看起来IE11需要您定义Flex项目的大小(li): @H_502_6@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; } @H_502_6@<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相关文章