How to make my web pages Internet Explorer 8 compatible

by Federico Zoufaly 28. August 2008 08:25

In the past few months there has been a lot of debate on the web about the support that Internet Explorer 8 provides to web standards.  Chris Wilson has an excellent post debating the motivation behind the final decision of providing an opt-in flag to indicate IE8 that it should behave in NON-standard compliant mode. 

This is why we created aggiorno express for IE8 to help you solve the problem... but let's start from the beginning... 

When Microsoft first though of IE8 the idea was to provide a fully web standard compliant browser but they were facing a dilemma.  Should the new Internet Explorer be backward compatible with IE7 or should it force the adoption of web standards?  To many of us the answer is quite straightforward, let's enforce standards!  However this is not that easy when you have such a large installed base as Microsoft has.  Microsoft had already receive quite a bit of heat when launching IE7 for breaking compatibility with IE6 and therefore causing many pages to render incorrectly.  The initial decision from Microsoft was to leave IE8 by default compatible with IE7, i.e: NON standard compliant!  If a web developer new its pages were standard compliant they would need to insert a special flag to tell so to the browser.  This initial decision was eventually reversed by Microsoft (with lots of applause from the standards community) and now IE8 by default runs in standards mode. 

However, what happens to the many pages that were "optimized" (some people would say "hacked") to run well with IE7? Microsoft included a compatibility mode in IE8. At the user level there is a compatibility toggle button that can be selected.  So, if a page renders incorrectly the user can switch modes and try to render it as Internet Explorer 7 would have. But what if as a web developer I want to make sure that my pages render well in IE8 without the need of a user action? There are 2 possibilities.

1) The best thing you can do with your pages is to make them standards compliant. This will not only help you with IE8 but also with other browsers such as Firefox, Safari, etc.  In the long term this is the best solution to solve cross browser compatibility issues.  (a long discussion on the value of standards with respect to SEO, accessibility, etc. can be found in the references below).

2) Microsoft has introduced a new meta tag recognized by IE8 to provide additional information to the browser beyond the DOCTYPE.  This meta tag tells the browser if it should interpret the page emulating other versions of Internet Explorer. The flag has 5 possible values:

a) <meta http-equiv="X-UA-Compatible" content="IE-5" />: The page will be rendered in quirks mode.

b) <meta http-equiv="X-UA-Compatible" content="IE-7" />: The page will be rendered in IE7 standards mode even if no DOCTYPE is present.

c) <meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7" />: The page will be rendered as IE7 does.  This is the preferred compatibility mode.

d) <meta http-equiv="X-UA-Compatible" content="IE-8" />: This is the default IE8 and the most standards compliant mode.

e) <meta http-equiv="X-UA-Compatible" content="IE-edge" />: This prepares the page to render with any future IE version, always using the latest rendering engine.

The compatibility tag can be added as part of the server's HTTP header or as part of the HEAD for each page.  If you have access to the server and if you want to use the same tag on all the pages, then adding the flag to the server's header is the cheapest solution.  However, if you do not have access to the server and if you are transitioning to a more standard support for your pages you should add the appropriate meta tag to each page.

In order to add the flag to each page you can either write some sort of (complicated) regular expression to perform the task or you can download a free version of aggiorno express that automates this task for you.

But why does ArtinSoft care about browser compatibility?  Well, aggiorno is all about incrementing web developers productivity by encapsulating knowledge and allowing its application in the most automatic possible way.  aggiorno version 1 is mostly about cleaning up the web and helping web developers into the time consuming task of making web pages validate and standards compliant.  The next minor release of aggiorno (soon, very soon) will also help you add the IE compatibility flag and take advantage of the a new concept in IE8 called web slices (more on this feature in a later post).  In the mean time, we also wanted to support our customers with a free tool that allows for the incorporation of the compatibility flag in batch mode thus saving you time and making the transition to IE8 as simple as possible while you (using aggiorno!) make sure your pages are standards compliant!

References:

- Clean, crisp, accessible HTML - why not?

- Web Site Validation:The Fundamentals

- Accessibility Checklist and Web Standards

- Web Standards and Search Engine Optimization (SEO) -- Does Google care about the quality of your markup?

- Defining Document Compatibility (MSDN documentation for IE8)

kick it on DotNetKicks.com

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Aggiorno | Web Standards

Comments