一切都可以在Chrome和Firefox中正常运行,但是猜测是什么,我在IE中有问题! (IE11)
在我的响应布局中,我希望菜单在pc模式下是水平的,在平板电脑/移动模式下是垂直的.它只是这样,但在IE中,菜单项没有高度.如果使用开发人员工具检查,它们都会折叠到0高度.我找不到为什么
任何人都会有想法?
我做了一个代号:
http://codepen.io/Reblutus/pen/qjacv
这是代码
<style> header { background: cyan;} nav { background: bisque;} .main-a { background: tomato;} .main-b { background: lightblue;} footer { background: lightpink;} .headerContainer nav { display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-flex-flow: column Nowrap; flex-direction: column; } .headerContainer nav > a { padding: 5px 10px; text-align: center; background: #fcd113; border: #6eac2c solid 1px; border-width: 0 0 1px; -webkit-Box-flex: 1; -moz-Box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media all and (min-width: 600px) { .wrapper { display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-flex-flow: row Nowrap; flex-direction: row; } .wrapper > .headerContainer { -webkit-Box-flex: 1; -moz-Box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .wrapper > .mainContainer { -webkit-Box-flex: 2; -moz-Box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; } .mainContainer { display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-flex-flow: row Nowrap; flex-direction: row; } .mainContainer .main-a { -webkit-Box-flex: 2; -moz-Box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; -webkit-Box-ordinal-group: 2; -moz-Box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .mainContainer .main-b { -webkit-Box-flex: 1; -moz-Box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-Box-ordinal-group: 1; -moz-Box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } @media all and (min-width: 800px) { .wrapper { display: block; } .headerContainer { display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-flex-flow: row Nowrap; flex-direction: row; } .headerContainer header { -webkit-Box-flex: 1 200px; -moz-Box-flex: 1 200px; -webkit-flex: 1 200px; -ms-flex: 1 200px; flex: 1 200px; } .headerContainer nav { -webkit-Box-flex: 1 100%; -moz-Box-flex: 1 100%; -webkit-flex: 1 100%; -ms-flex: 1 100%; flex: 1 100%; -webkit-flex-flow: row Nowrap; flex-direction: row; } } </style> <div class="wrapper"> <div class="headerContainer"> <header>logo <i class="fa fa-camera-retro"></i> </header> <nav> <a href="javascript:;">Home</a> <a href="javascript:;">About Us</a> <a href="javascript:;">Our Properties</a> <a href="javascript:;">Clients & Partners</a> </nav> </div> <div class="mainContainer"> <div class="main main-a">Main content A</div> <div class="main main-b">Main content B</div> </div> </div> <footer>footer</footer>
解决方法
原文地址:https://www.jb51.cc/css/217383.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。