Internet Explorer Hacks

Antonija Dimoska
Codeart
Published in
6 min readApr 11, 2019

The bane of existence for every front-end developer is, needless to say, Internet Explorer.

You spend hours to make it pixel perfect, it looks great in every browser and then you open Internet Explorer.

If you’ve used flex or grid, even with vendor prefixes and fallbacks, there are big chances something like this will happen:

Internet Explorer doesn’t play nice. In this article I will cover the most common IE bugs that I’ve encountered and the solutions I have found.

Here are some of the hacks, from personal experience, that proved to be time savers.

I will be using simple examples so I can show you what happens in the browsers. I will also show the difference between the browsers Mozilla Firefox and Google Chrome, and Internet Explorer 11 with its predecessor Internet Explorer 10. Internet Explorer 9 is a whole different story.

MIN-HEIGHT with FLEXBOX bug

Let’s say you are using flexbox to center content in a parent with min-height.

HTML

<!-— MAIN --> 
<main>
<div class=”wrapper”>
<div class=”box”>
<div class=”box__img”></div>
</div>
<div class=”box”>
<h1>Lorem ipsum</h1>
</div>
</div>
</main>

CSS

main { background: #eee; } .wrapper { 
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 700px;
margin: 0 auto;
min-height: 100vh;
}
.box { padding: 20px; } .box__img {
width: 200px;
height: 200px;
background: #000;
}

If you can notice, the wrapper which contains both the box and the text, has a min-height and its elements are vertically and horizontally centered.

Mozilla Firefox / Google Chrome
Internet Explorer 10 / Internet Explorer 11 before the fix

This problem happens because the flex items ignore their parent container’s height if it’s set via the min-height property.

FIX

Luckily, there is a simple hack. Give the element height that is less than the min-height.

.wrapper { 
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 700px;
margin: 0 auto;
min-height: 100vh;
// add height that is less than the min-height
// it can even be 1px, as long as it is less than the min-height
height: 1px;
}

It won’t mess up the other browsers and it will work in IE11 and IE10 as intended.

Internet Explorer 10 / Internet Explorer 11 after the fix

FLEX CHILDREN WIDTH BUG

For this example I am using the Bootstrap 4 grid system which is built with flexbox.

<!-— MAIN -->
<main>
<div class=”wrapper”>
<div class=”row”>
<div class=”col-sm-4">
<div class=”box”>
<div class=”box__header”></div>
<div class=”box__content”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<div class=”col-sm-4">
<div class=”box”>
<div class=”box__header”></div>
<div class=”box__content”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<div class=”col-sm-4">
<div class=”box”>
<div class=”box__header”></div>
<div class=”box__content”>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</div>
</div>
</main>
Mozilla Firefox / Google Chrome
Internet Explorer 10 / Internet Explorer 11 before the fix

This happens because in IE10 and IE11, the default values for display flex are

flex: 0 0 auto:

which means:

flex-grow:   0;
flex-shrink: 0;
flex-basis: auto;

FIX

There are two ways that I’ve found that you can do to fix this bug.

Either, add width: 100% to the flex parent element, in this case to the class .row.

.row {
width: 100%;
}

Or you can change the default flex values:

.row {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}

It works in both IE11 and IE10:

Internet Explorer 10 / Internet Explorer 11 after the fix

FLEX CHILDREN TEXT NOT WRAPPING

Using the same HTML from the second example, I’ve added display flex to the box container and the results are below:

main { background: #eee; } //first example hack
.row { width: 100%; }
.wrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 700px;
margin: 0 auto;
min-height: 100vh;
//second example hack
height: 1px;
}
.box__header {
width: 100%;
height: 100px;
background: #000;
}
.box__content { padding: 10px; } .box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Mozilla Firefox / Google Chrome
Internet Explorer 10 / Internet Explorer 11 before the fix

FIX

You can either add max-width or width to the child element.

.box__content { 
//add width 100% to the parent of the paragraph element
width: 100%;
//or you can set max-width 100% to the parent of the paragraph
max-width: 100%;
padding: 10px;
}
Internet Explorer 10 / Internet Explorer 11 after the fix

OVERFLOW HIDDEN bug

If you want to disable scroll on the body when the responsive menu is open, you usually do that by setting overflow: hidden. It works everywhere, but sometimes IE doesn’t recognize it and instead, it gives you vertical AND horizontal scroll.

FIX
Just add -ms-overflow-style to the class where you set overflow: hidden.

 overflow: hidden;
-ms-overflow-style: none;

It works like a charm. If you want to read more about it, you can check it here.

INITIAL keyword

Another thing of note is that no version of Internet Explorer supports the keyword initial. If you need to use it, choose inherit instead. You can check the browser compatibility for initial here.

These are some of the bugs in IE I think are the most common and these hacks might help you to avoid the headache that IE is master in activating. If you have encountered other IE bugs, feel free to tell me, I will be happy to fight alongside you with our archenemy, Internet Explorer.

--

--

Codeart
Codeart

Published in Codeart

An innovative web development agency building high-performing websites and applications that make businesses succeed.

Antonija Dimoska
Antonija Dimoska

Written by Antonija Dimoska

Frontend Developer at Codeart Network

No responses yet