Web Development for Internet Explorer Compatibility

Share on Google+Share on FacebookTweet about this on Twitter

As a company, Top Draw includes cross-browser support for current versions of major browsers (less one major version-release), as part of the development specifications for our projects. We recently decided to discontinue optimization support of the Opera browser, as they have consistently held less than 3% of the user-market in the last decade, and less than 0.5% of our clients’ users utilize Opera. Development in most modern web browsers is fairly straightforward, as the industry continues to move towards standardized practices, and the various rendering engines adopt more consistent methods. There are still common differences between browsers and rendering engines, such as the manner in which fonts are rendered, default styling of form and list elements, as well as treatment of margins and padding around certain HTML elements.

Major Internet Browsers

Long standing as the black sheep of the web industry due to non-compliance of web standards, the Internet Explorer browser has been steadily decreasing in popularity with the user market. Despite this decline, a large number of corporate users are obligated to use Internet Explorer due to licensing and/or corporate policy. It is for these users that a client may require cross-browser compatibility to as far back as Internet Explorer 8. With the support of old Internet Explorer versions comes compatibility concerns and challenges associated with these versions, such as limited HTML element and CSS property support, lack of @media query support, and complications with certain pieces of JavaScript and jQuery. Here we will be reviewing a few methods and tools that deal with the visual display differences that arise when optimizing a site for use in versions of Internet Explorer earlier than IE9.

Conditional CSS Classes

While many aspects of modern web development are not supported by legacy browsers, a large portion of the visual appearance may be manipulated to appear a certain way using CSS and conditional classes. Conditional CSS classes allow the developer to keep all document styles (including browser-specific CSS) in the same stylesheet, while avoiding the use of CSS property-prefix hacks and conditional stylesheet linking.

[html light=”true” wraplines=”true”]
<!–[if lt IE 8]> <html class="lt-ie9 lt-ie8> <![endif]–>
<!–[if IE 8> <html class="lt-ie9"> <![endif]–>
<!–[if gt IE 8]><!–> <html class=""> <!–<![endif]–>

The benefit to this method is that the browser does not have to make multiple HTTP requests to obtain files for browser-specific styles, and valid HTML/CSS are rendered. These conditional classes also make it simple to target elements in specific versions of Internet Explorer, so that developers may manipulate them as necessary to achieve the desired visual appearance. You can read more about conditional CSS classes and targeting versions of IE here.


Along with the popularity of mobile devices has come the increased prevalence of mobile optimized and mobile-responsive web development. The most common development method for visual optimization on mobile devices is the use of CSS media queries. Media query support was not added by Internet Explorer until IE9. With such a large portion of the user-market being mobile users, it is proactive to support media queries in older versions of Internet Explorer using a polyfill.

Respond.js is one of the most well-maintained polyfills that provides a patch for browsers that don’t support media queries (in particular IE8 and lower). Use of respond.js is simple:

  1. Write your media queries and CSS for the various resolutions you are optimizing for.
  2. Include ‘respond.js’ or ‘respond.min.js’ in the head of your document, & enjoy responsive design on your site in older versions of IE!

You can fork respond.js or read more about it here.

Background Size (IE8)

Prior to IE9, the CSS property background-size was not supported.

[html light=”true” wraplines=”true”]
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='[path to your image file]’,

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='[path to your image file]’,

The CSS above is one of the most straight-forward approaches that attempts to resolve this challenge, though sizingMethod='scale' would stretch the image to fill the entire area of its containing element.

Another solution is the inclusion of a polyfill method to force the behaviour of the background CSS in Internet Explorer. Background-Size Polyfill requires the upload of ‘backgroundsize.min.htc’, and a change to the .htaccess of the site. After the file inclusion and .htaccess change, the following CSS needs to be included for each element where you are making use of background-size.

[html light=”true” wraplines=”true”]
.selector {
background-size: cover;
-ms-behavior: url([absolute path to]/backgroundsize.min.htc);

You can read more about the use and limitations of background-size polyfill here.

Border-Radius, Box-Shadow and Other CSS3 Properties

In the absence of a well-maintained solution to make newer CSS classes compatible with older versions of Internet Explorer, I recommend the following:

  1. Use filter or -ms-filter properties and values where appropriate and/or applicable in your CSS.
  2. Barring other CSS solutions, allow graceful degradation of your CSS.

Have any other dev-tips or tools? Share them in the comments below!

Contact Us