How to fix CSS issues in IE11 (Internet Explorer 11)

When creating web designs for large enterprises (eg governments, non-tech companies) a common issue is that our designs need to support Internet Explorer (IE) - at least IE11.

To fix CSS issues in IE11, we can use the following checklist to troubleshoot:

1. Make sure that the HTML and CSS is valid - using W3C validator
2. Check that the CSS property is valid in IE11 using CanIUse
3. Use CSS resets (such as Eric Myers CSS reset, Normalize.css)
4. Use media query targetting IE11: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { ... }
5. Use vendor prefix that is specific to IE11: -ms-
6. Check for reported CSS bugs with IE11 - example: Flexbugs
7. Use progressive enchancement and polyfill libraries Modernizer

In this article we will expand on the above checklist and give a bit more details on what is involved in each item of the checklist. Hopefully this can reduce the amount of headache :)

Check HTML and CSS is valid

The first thing to check for layout issues in IE11 is to make sure that your HTML and CSS is valid. This is good practice even if you are not trying to fix IE11 specific issues. Validation helps you with the following:

• Useful as a debugging option
• Future-proof quality check
• Reduces maintenance issues
• Helps teach good practices
• Shows professionalism

You can do this by using tools such as W3C HTML Validator and their CSS Validator.

Check CSS property is supported in IE11

Since Internet Explorer 11 is a relatively old browser, there has not been any updates. Microsoft has moved on to Edge. Just to make sure that a usage of a CSS property is supported you can use the following website to check CanIUse.

For example, some common CSS features are not available with IE11:

• CSS variables
• CSS text-size-adjust - cannot adjust text sizes based on mobile devices
• CSS3 attr() function on the content property
• Using SVG for favicons - you will have to resort to using the .ico file type.
• CSS flex layouts. Flex layouts needs to be reviewed when in IE11. As an example, in flex you can space elements evenly with CSS justify-content: space-evenly. This is not available in Internet Explorer 11.

Use CSS resets

CSS resets help to reduce browser inconsistencies (Firefox, Chrome, Safari, etc). This can include things such as default margins, line heights, fonts, headings etc. As an example, with div elements the padding is more in firefox compared with IE11.

Although these resets are less likely needed with modern browsers, they maybe required when you have to support browsers like IE11.

Internet Explorer contains a lot of differences in its CSS interpretation for diferent versions of the browser.

There are a few resets available - but the most famous and used on is Eric Myers CSS reset.

Use media query hack

CSS media queries are used to target specific devices (mobiles, tablets, laptop, etc) based on their width and height, orientation, resolution. With modern browers this works very well. However if you are dealing with IE11, make sure you use the following hack if you want to specifically target IE11.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

    ...
}

The above just means that we will target anything that is not -ms-high-contrast. This is a hack since Edge does not support -ms-high-contrast, so we are sort of working backwards.

Use IE11 specific vendor prefix

Vendor prefixes (or also known as CSS browser prefixes) are a way for browsers to add support to CSS properties before they are fully supported. Prefixes are detailed as follows

• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

So for example, lets say you want to use the transition CSS property to animate the width of a span element:

span { 
    transition: width 2s;
}

If we want to add IE11 support we just add the prefix -ms- - so that now becomes:

span { 
    -ms-transition: width 2s;
}

Review CSS bugs reported with IE11

So with IE11 (Internet Explorer 11), theres a list of bugs thats been reported but have not yet to be addressed.

To check if your layout issue is due to a known IE11 bug, you can use CanIUse - which also reports the existing bugs.

Additionally IE11, has not been good with flexbox type of layouts. You can check for existing flex box issues at Flexbugs

Use progressive enhancement and polyfill libraries

In addition to checking CSS issues, the cause of your layout could be JavaScript related. This this case we can use polyfills as a fix. Polyfills are JavaScript functions that help provide modern browser features for older browsers. For example can be used to adjust rem units or media queries by using JavaScript, fixing CSS filters thats only specific to IE eg text-shadow.

As an example, with IE11 the JavaScript array flat function (which is available on modern browsers) is not available. The flat function just flattens out nested elements in an array.

To fix this we will need to use a polyfill located here

Final thoughts

We have gone through a checklist of ways to debug CSS issues when your website needs to support IE11. This includes: checking the HTML/ CSS is valid, checking CSS property is supported in IE, check media queries, using polyfils, using CSS resets. The easiest checks are at the top of the list and going further down the these techniques will take more time/ investigation.

The best way going forward would be to convice the organisation to move of IE and onto browsers such as Edge, Chrome, Firefox, etc where support and bug fixes are actively worked on.