我创建了一个列有社交图标的列表.那些图标应该放在小屏幕上.
我使用flex-wrap:wrap;它在Firefox和Chrome中完美无缺:
但Internet Explorer 11(和IE 10)不会打破这一行:
代码笔示例
查看代码:http://codepen.io/dash/pen/PqOJrG
<div> <ul> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> </ul> </div>
CSS代码
body {background: #000;} div { background: rgba(255,255,.06); display: table; padding: 15px; margin: 50px auto 0; } ul { display: -webkit-flex; display: -ms-flexBox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; list-style: none; padding: 0; } li { background: purple; margin: 4px; } img { display: block; height: 40px; padding: 7px; width: 40px; }
这似乎是一个IE错误,显示Flex元素的父容器设置为显示:删除此行可以解决问题.但我需要显示:table;将父容器集中.
任何想法如何让IE11包装图像?
解决方法
原文地址:https://www.jb51.cc/css/217185.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。