Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

Make Site Compatible to IE6, IE7, IE8 and IE9

Rate me:
Please Sign up or sign in to vote.
3.88/5 (6 votes)
6 Jan 2014CPOL8 min read 92.6K   17   2
How to make a site compatible to IE6, IE7 and IE8

Table of Contents

  • Introduction
  • IE8 Version
  • IE8 Browser Mode
  • IE8 Document Mode
  • Developer Tools
  • Conclusion

Introduction

This document gives the complete description to make your site compatible to IE6 as well as IE8. As you know, when we are moving our existing application to a new browser, we face lots of problems. In this white paper, we will discuss those things in detail and know the right approach to do things so that we can prevent ourselves from mash. Some of the challenges which we face while supporting new browser are knowing how we start, and whether we are using the right approach? This is the only way by which we can do these things or we can do some more research? Will our solution work on every machine like IE8 that has different versions in Window7 and XP machine? These are the questions which we always have in our mind when we are supporting a new browser, so let's talk about them in detail.

IE8 Version

Before starting on any new project, we must have to work on details. This is also true for IE8 migration work, so let's start with little bit of details. Most interesting thing about IE8 is that it has a different version for XP and Windows 7, so if you are planning to support IE8 on XP, IE8 on Window 7 or in both, then make note of it since Windows 7 IE8 behaves a little differently than the one in XP. It is not true that your code will work idly in both Windows 7 and XP machine. To make it compatible in both, you need to work on both.

IE8 Browser Mode

Browser mode controls the way in which Internet Explorer identifies itself to the server hosting a webpage. When you use the developer tools to change the browser mode, Internet Explorer reloads the webpage from the hosting server.

Migrating the existing site to IE8 is not an easy task and sometimes it is even not possible to migrate the old one to a new IE8 browser without changing its structure. Changing structure you know is a big challenge since the site is already running in production environment and users are using it and are used to it. And also there are great changes that changing structure will hamper functionality.

As this is not the new problem and lots of IE8 user have faced this problem. Microsoft understands the risk involved with this, hence they have provided three browser modes.

  1. IE7
  2. IE8
  3. IE8 Compatibility view

IE7 Mode

Those sites which are running on IE6 can be run on the IE7 with some changes. These changes can be major but not the structural hence risk is less. IE7 browser mode means that it will behave the same like the IE7 browser however it is running on IE8 browser but internally it is using IE7 browser engine. This is all handled by IE8 browser. We need not worry about this. Just take care about which mode we need to use.

IE8 Mode

IE8 browser mode is the mode which follows the latest web Standard. It throws the errors if any standard would not be followed so running the site in IE8 mode is a tough task, but it is good in the long run.

IE8 Compatibility View

IE8 compatibility view is the same as IE8 mode but it neglects some of the web Standard and it is a kind of quick fix where you can run your site by neglecting some standards. Most of the legacy behavior that no longer exists in IE8 Standards Mode was supported by IE8 Compatibility view.

IE8 Document Mode

Document compatibility defines how Internet Explorer renders your webpages.

Like IE8 browser mode, IE8 has 3 different documents modes. So the question arises here as to why they have 3 different browser modes. So the region is the same supporting the legacy application which either involved lots of risk or is unable to migrate some parts.

In most cases, Microsoft recommends that websites use the HTML5 document type in order to support the widest variety of established and emerging standards, as well as the broadest range of web browsers. The following example shows how to specify the HTML5 document type.

HTML
<!doctype html> 
<head>
  <title>Enabling Standards Mode</title>
</head>
<body>
  <p>
     This webpage uses the <!doctype> directive to
     specify the HTML5 document type.  
  </p>
</body>
</html>

In some cases, existing websites may not display correctly when displayed in IE8. This can happen for any number of reasons, including (but not limited to) the following:

  • The design of a site may rely on the behavior of a specific version of a browser and that behavior has changed in later versions of the browser, such as conditional comments, version vectors, and user-agent detection.
  • The design of a site may rely on non-standard behavior.
  • The design of a site may rely on functionality that is no longer supported in the latest versions of various standards or browsers.
  • The design of a site may rely on functionality that was incorrectly implemented in an earlier version of a given browser.

In many cases, it is best to use the <!doctype> directive to specify a standards-based document type, such as the HTML5 document type shown in the above example.

This allows your site to take advantage of developments and feature enhancements made to web browsers as new versions are released.

However, there are situations where it is appropriate to use document compatibility to display your webpages as if they were viewed in an older version of Internet Explorer. The following list shows a few different examples:

  • If you are creating an application designed to be viewed by a single computer or web browser, such as a multimedia presentation displayed in a kiosk, it may be appropriate to use the X-UA-Compatible header to ensure that the application is displayed consistently, even after updating the hardware or software that powers the kiosk.
  • If you have created a custom application that is accessed through an intranet environment, such as a line-of-business (LOB) application developed for a company's internal use, the X-UA-Compatible header can help you reduce the maintenance required to support the application through future operating system upgrades or future browser updates.
  • If you are archiving web content and plan to have that available on an as-is basis, that is, the archived content will not be actively maintained, the X-UA-Compatible header can help ensure that it will be presented as originally intended.
  • If your website uses a content management software (CMS) solution or other framework and you do not have direct control over the server or the document type used for your webpage, you may be able to use the X-UA-Compatible header to control the document mode that Internet Explorer uses to display your webpage. (This depends on the underlying design of the site.)
  • If you are creating an HTML Application (HTA), use an X-UA-Compatible header to enable IE9 mode. HTAs do not support the <!doctype> directive.

If, however, you are creating a public website, one that might be viewed by a variety of web browsers and users, you should design your site so it uses a standards-based document type, such as the HTML5 declaration shown in the following example.

HTML
<!doctype html> 

This helps ensure that your site is displayed as consistently as possible when viewed by different browsers; it also helps ensure that the appearance of your site adapts to changes in the specifications underlying the standards that your site relies on.

If your site does not currently display properly when viewed by Internet Explorer 9, you can use the X-UA-Compatible header to make your site available while you redesign it so that it displays properly when viewed in IE9 mode. This should be a temporary measure, one that is removed when your site more fully supports standards-based document types.

Ultimately, the document compatibility decision is a design decision, one that you can make only after carefully weighing the various factors involved.

In short, you can chose the Document mode from the following.

Following are the three modes:

  1. Quirks
  2. IE 7 Standards
  3. IE 8 Standards

Quirks Document Mode

Quirks mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Internet Explorer 5.

IE 7 Standards Document Mode

IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a <!doctype> directive.

IE 8 Standards Document Mode

IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

Developer Tools

Developer tool is the tool which is provided by Microsoft for debugging web pages. It has lots of features which can be further explored in the following tutorials:

Conclusion

The above specified write up helps a developer/programmer/business analyst and others to make himself crystal clear about IE8. After reading this paper, they are very clear in their approach and can easily distinguish between right and wrong. They can easily decide without Googling and wasting lots of time on the internet what they require and how they can proceed to get that.

History

  • 29th November, 2011: Version 1

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
bluesathish8-Jan-13 23:31
bluesathish8-Jan-13 23:31 
GeneralRe: My vote of 1 Pin
HaBiX7-Jan-14 7:49
HaBiX7-Jan-14 7:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.