IE8 Beta – Pointers for making your website compatible with IE8 standards rendering mode
IE8 Beta 1 has been out for several months now and we are closing in on the release of IE8 Beta 2, which has been announced for August 2008 by the IE team. Now is a good time to get started on ensuring site compatibility with this new release.
Because IE8 will default to standards mode for displaying HTML pages, it is possible your site will not display as it is currently doing in IE7. How can you prevent problems and what do you need to do? Let’s review the different solutions going from an absolute minimum effort to major changes in the HTML.
This post is intended to give you a quick overview of the solutions and pointers to more detailed white papers (find these at the bottom of the post).
Major differences between IE7 and IE8 on rendering of HTML pages
Why is compatibility so important? IE8 will offer 3 different ways of rendering content:
- “Quirks mode” (IE5) remains the same, and compatible with current content.
- “Quirk mode” (IE7) remains the same as IE7, and compatible with current content.
- “Standards mode” (IE8), this is the default mode in which pages are displayed
As IE8 is planned to have full support for the CSS 2.1 standard and implement some CSS3 functionalities, the “Standards” mode is now the default rendering mode. But as many HTML developers have worked around some differences in HTML rendering in IE7 and before, this means your site may no longer display as desired in IE8.
Solutions for site compatibility in IE8
First of all you should test your site against the latest IE8 beta, to make sure there are any problems present. If you already have a site that follows standards closely and used conditional statement for example, you may not have to do any changes at all.
However, in case your site is optimized for IE7, the solutions below explain what you may do to make sure the site still displays nicely in IE8.
Solution 1: Add HTTP header in web server (effort: low)
This is a low effort solution if you have administrative rights to the web server(s) on which your site is running. Add an HTTP header on the server:
Solution 2: Add a meta tag per page (effort: medium)
Add a HTTP-EQUIV meta tag after the <head> tag on the page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Solution 3: Adapting the HTML code to be standards compliant (effort: low to high depending on implementation)
If you are making your website HTML code compliant with CSS 2.1 you might need to have changes done in the HTML. This effort however depends mostly on which workarounds or non-standards features have been implemented.
You can also add conditional statements to keep serving non-standards CSS or content to previous browser versions.
If you want to explicitly set that the site is IE8 standards compliant you can use the following tag:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Or you can choose to add a standards mode DOCTYPE.
Why worry now?
Beta 2, coming out in August 2008 will most probably be downloaded by a lot more end (power) users than the previous beta 1. You certainly don’t want your visitors to experience any hick-ups while visiting your site through IE8, so that’s why now is a very good time to start working on a solution.
Extra resources and information
Hans Le Roy’s blog in Dutch: if you are looking for information on IE8 in Dutch this is a very good resource. Hans is a Belgian MVP on IE and has posted over 30 posts on IE8 alone.
IE Team Blog on MSDN
This is the major resource for all news around IE8. The team posts very frequently on supported features.
This page on MSDN code gallery contains really good white papers on the different elements that are new in IE8. Going from solutions like the one discussed above to managing Add-Ons, performance improvements, CSS 2.1 compliance and much more. A fantastic reference.
CSS Compatbility and Internet Explorer
This document provides tables with CSS compliance indication starting from browser version IE 5.0 to IE8. A good reference to keep close by. This allows you to easily check if a certain feature of CSS 2.1 or CSS3 is supported, and in which version.