flexbox colonnes et IE
Tout fonctionne très bien sur Chrome et Firefox, mais devinez quoi, j'ai un problème sous IE! (IE11)
Dans ma mise en page responsive menu horizontal en mode pc et verticale en tablette/mobile mode. C'est juste que, mais sous IE, le menu objets n'ont pas de hauteur. Ils s'écroulent tous à 0 hauteur en cas de contrôle avec l'outil de développeur. Je ne trouve pas pourquoi.
Quelqu'un aurait une idée?
J'ai fait un codepen pour elle:
http://codepen.io/Reblutus/pen/qjacv
Voici le code
<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>
- btw., le menu est aussi verticale pour moi sur mon bureau.
- J'ai sauvé le codepen avec le manque de Supports requêtes Thx!
Vous devez vous connecter pour publier un commentaire.
J'ai eu un problème similaire avec IE11.
Apparemment le problème est de le faire avec IE la mise en œuvre de la
flex
de la propriété.Source: http://caniuse.com/#feat=flexbox
La définition explicite de la
flex
propriété1 0 auto
de remédier à la question pour mon cas.Donc, partout où vous disposez de la flexibilité de la propriété de définir, de mettre à jour les valeurs à la hauteur de ce format explicite.
Retrait de la
flex
éléments dans.headerContainer nav > a
résout le problème. Testé dans IE11 et Chrome.... mais qui ne casse l'ensemble de maquettes, de sorte que vous aurez à les mettre en arrière pour la >800px media query.