A Guide to Target Older IE Browsers

I am working on a website that need to target people in China. According to statistics, there are about 20% of people still using IE.

I decide to use a progressive enhancement approach targeting older IE browsers.

Here are what I have to do:

First, for IE11:

Since IE11 doesn’t have full support for es2015, you could use babel to transpile them in the browser on the fly. By to make it faster for users, I use webpack to transpile all vanila my javascripts.

Before I use babel or webpack, IE11 would give me syntax error.

Add width: 100% for divs, otherwise, text would overflow.

Then, for IE10:

IE10 does not support flexbox with the -ms- prefix. I let webpack compile my css, then I use css3finalize to add microsoft browser vendor prefix. Because I put css in import statements, directly using css3finalize would not work. It can’t go deep into my css files. It can’t follow the import statement. I use webpack to compile all my css to one file, then css3finalize would recognize all styles.

After this, IE10 also have the flexbox overflow bug, I found the fix here. If you want to how I implement it, here it is (in React):

{/*id10 flexbox overflow fix*/}
<div style={ { maxWidth: "1400px" }}>
<div className="date-text">
<p className="news-date">{ dateFormatted } </p>
<a className="news-excerpt" href={ link }>

{/*id10 flexbox overflow fix*/}
<div style={ { maxWidth: "1400px" }}>
<p>
{ excerpt }...
</p>
</div>
</a>
</div>
</div>

Another problem under IE10 is that the google map embed is not showing. My fix is give it a width;

//Html
<div class="iframe-responsive-container map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5732.606593104761!2d-71.20357274694494!3d42.387571646739254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e39d5a1603cc35%3A0x9b49f1eb8f6d6a5a!2s465+Waverley+Oaks+Rd+%23417%2C+Waltham%2C+MA+02452!5e0!3m2!1sen!2sus!4v1495070310365"
frameborder="0" style="border
:0" allowfullscreen></iframe>
</div>
CSS:
.map-container {
width: 60%;
}

Another problem under IE10. I use Materialize CSS in this project, I use its file input style. In IE10, it requires double click. Because on IE10 the default file input looks like this:

Since materialize css works by overlaying text and hiding the default input beneath it, when clicking on the left part of the input field, it does not trigger the pop up. Only double click do. So:

if (navigator.userAgent.indexOf("MSIE") > 0) {
$(".file-select-button-section").mousedown(function() {
$(".file-select-input").trigger('click');
})
}

Let’s keep in touch. Sign up here.