Geek Answers Handbook

IE 11, Flexbox and Absolute Positioning Not Working

This is how Chrome renders my HTML on Windows 10:

Chrome

And this is how Internet Explorer 11 renders my HTML on Windows 10:

Internet Explorer 11

Please note that in Chrome you can see all the submenu links, but in Internet Explorer 11 you cannot. What can I do to make it work in Internet Explorer 11?

Here is my 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>
+5
source share
2 answers

The problem is that IE11 does not recognize the right: 0 offset applied to an absolutely placed flex container ( .submenu ).

Given that the layout works in Chrome and Firefox, the problem is most likely a bug in IE11, which is not surprising.

On the popular caniuse.com browser compatibility website , IE11 used the green icon for flexbox. This means that IE11 provides full support. However, recently IE11 has been downgraded to pale green, which means partial support, due to the large number of bugs present .

Here is an easy way:

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

The flex-direction property determines the direction in which the flex-direction elements are laid out. The default value is flex-direction: row . With row-reverse (and column-reverse ), the main and initial directions are reversed.

This fixes the problem in IE11 without breaking anything in other browsers.

However, it overrides the link order in all browsers.

To fix this problem, you can reorder the links in the source or use the flex order property to cancel only on the screen:

 .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 ; }

Full code (tested in Firefox, Chrome, and 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

+2
source

Although I am very inclined to adopt Flexbox, and I do this in all of my recent projects, it does not seem to play an important role in your code. With this in mind, you should know that there is an easier and more convenient fix for this particular problem if you remove display: flex and its variants from CSS and add white-space: nowrap to .submenu .

This way, you don’t have to deal with reordering submenu items, which can be a problem when changing the number of items.

Once, when IE11 is no longer worried, you can return to the source 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; /* 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/

+1
source

More articles:


All Articles