/ / IE 11, Flexbox et Positionnement absolu ne fonctionne pas - html, css, css3, internet-explorer, flexbox

IE 11, Flexbox et positionnement absolu ne fonctionne pas - html, css, css3, internet-explorer, flexbox

Voici comment Chrome affiche mon code HTML dans Windows 10:

Chrome

Et voici comment Internet Explorer 11 affiche mon code HTML dans Windows 10:

Internet Explorer 11

Notez que dans Chrome, vous pouvez voir tous les liens de sous-menu, mais dans Internet Explorer 11, vous ne pouvez pas le faire. Que puis-je faire pour que cela fonctionne dans Internet Explorer 11?

Voici mon code:

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}
<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

Réponses:

2 pour la réponse № 1

Le problème semble être que IE11 ne reconnaît pas la right: 0 offset appliqué au conteneur flexible positionné de manière absolue (.submenu).

Considérant que la mise en page fonctionne dans Chrome et Firefox, le problème est probablement un bogue dans IE11, ce qui ne serait pas une surprise.

Sur le site Web de compatibilité de navigateur populaire caniuse.comIE11 avait un badge vert complet pour la flexbox. Cela signifie que IE11 fournit un support complet. Récemment, cependant, IE11 a été rétrogradé en vert pâle, ce qui signifie un support partiel, en raison d'une grande quantité de bugs présents.

Voici une solution de contournement simple:

.submenu {
position: absolute;
display: flex;
flex-direction: row-reverse;  /* <-- ADD THIS */
}

le flex-direction propriété détermine la direction dans laquelle les éléments flexibles sont disposés. Le réglage par défaut est flex-direction: row. Avec row-reverse (et column-reverse) la départ principal et extrémité principale les directions sont permutées.

Cela corrige le problème dans IE11, sans rien casser dans les autres navigateurs.

Cependant, il inverse l'ordre des liens dans tous les navigateurs.

Pour résoudre ce problème, vous pouvez inverser l’ordre des liens dans la source ou utiliser la commande fléchir order propriété pour inverser l'ordre sur l'écran uniquement:

.submenu-4 > li:nth-child(1) { order: 5 ; }
.submenu-4 > li:nth-child(2) { order: 4 ; }
.submenu-4 > li:nth-child(3) { order: 3 ; }
.submenu-4 > li:nth-child(4) { order: 2 ; }
.submenu-4 > li:nth-child(5) { order: 1 ; }

Code complet (testé dans Firefox, Chrome et IE11):

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row-reverse;                   /* NEW */
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}

.submenu-4 > li:nth-child(1) { order: 5 ; }        /* NEW */
.submenu-4 > li:nth-child(2) { order: 4 ; }        /* NEW */
.submenu-4 > li:nth-child(3) { order: 3 ; }        /* NEW */
.submenu-4 > li:nth-child(4) { order: 2 ; }        /* NEW */
.submenu-4 > li:nth-child(5) { order: 1 ; }        /* NEW */
<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

jsfiddle

1 pour la réponse № 2

Bien que je sois très favorable à l'adoptionFlexbox et moi, dans tous mes projets récents, cela ne semble pas jouer un rôle important dans votre code. Dans cet esprit, vous devez savoir qu’il existe un correctif plus facile et plus facile à gérer pour ce problème spécifique si vous supprimez display: flex et ses variantes du CSS et ajouter white-space: nowrap à .submenu.

De cette façon, vous ne devrez pas vous occuper de la réorganisation des éléments de sous-menu, ce qui peut poser problème si le nombre d’éléments change.

Un jour, alors que IE11 n'est plus une préoccupation, vous pouvez revenir à votre code d'origine.

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
/* removed flexbox */
white-space: nowrap; /* new */
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}
<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

https://jsfiddle.net/rddo2gr4/

questions connexes

Comment IE6 rend-il le positionnement absolu différent? - php, html, internet-explorer-6, css-position
Mise à jour d'un flexbox jQuery - jquery, jquery-flexbox
Modernizr pour vérifier les transformations css3d et flexbox incluent ie10 - javascript, css, flexbox, modernizr, détection des fonctionnalités
HTML - Div vers le bas sans positionnement absolu - javascript, jquery, html, css, css3
flex-direction et flex ne fonctionnent pas pour tous les navigateurs [duplicate] - html, css, css3, cross-browser, flexbox
Image n'agissant pas "responsive" en utilisant la flexbox? - html, css, flexbox
Comment définir une lacune spécifique dans CSS - html, css, css3, flexbox, grille-layout
Flexbox div ne prend pas toute la largeur - html, css, css3, flexbox
Flexbox ne semble pas fonctionner dans IE - html, css, internet-explorer, flexbox
Flexbox et positionnement absolu ne fonctionnant pas dans Chrome et Safari - html, css, css3, flexbox, position css
Étant donné que la taille d'un div correspond à celle d'une image dans un conteneur, flexbox peut-elle automatiquement calculer une seconde hauteur de division pour remplir le conteneur? - html, css, css3, flexbox, calc
mon menu ne s'aligne pas dans IE - html5, internet-explorer, menu, responsive-design
Comment utiliser flexbox avec Bootstrap alpha v6 - html5, twitter-bootstrap, css3, flexbox
Flexbox - Arrêter la flexbox - Css, Grid, Flexbox
Comment mettre en page du contenu empilé mal assorti avec flexbox - css, flexbox
Modèle de boîte flexible - css, flexbox
Problème avec Ember.js et flexbox pour les dispositions: "flex: 1" est ignoré - css, css3, ember.js, flexbox
IE 6 Problèmes avec le positionnement absolu - CSS, Internet-Explorer, Internet-Explorer-6
Flexbox css3 crée une ligne centrée réactive? - css3, twitter-bootstrap-3, flexbox, réactivité
ie10 et flexboxes? (cauchemar) - css3, internet-explorer, internet-explorer-10, flexbox