一切都可以在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>