Internet Explorer Hacks
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.
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.
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>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:
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;
}
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;
}
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.
