Internet Explorer Hacks

Antonija Dimoska
Apr 11, 2019 · 6 min read

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

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

<!-— 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

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

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

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

Handcrafted Websites & Apps