IE 8 Standard Mode vs Compatibility Mode

We had an issue where a menu dropdown was rendering differently on the dev server in contrast to what we had locally. After doing an exhaustive comparison of the css on local and on the dev server they were identical.

As it turns out IE8 has compatibility modes which allow the user to choose how the website will be rendered. You can acess this feature via: Tools | Compatibility View Settings. This feature is quite useful for sites that haven’t been updated to support more strict HTML standards. What is of interest to us is IE8 defaults to have all intranet sites put into “Compatibility View”. This explained why it rendered perfectly fine in IE8 locally but exhibited rendering issues once accessed on the dev server via the intranet.

We were able to fix this issue by adding the following meta tag to the head section of the MasterPage. This basically tells IE8 to render in Standard Mode. This has no effect on IE6 so things work as designed:

<%--This enforces IE8 standard mode since compatibility view throws off styling--%>    
    <meta http-equiv="X-UA-Compatible" content="IE=8" >

Edit: It appears that if the Intranet zone is configured to “Display intranet sites in Compatibility View” this solution above will not force the pages into IE8 Standards mode as the browser settings are overriding this.

To get around this you need to have a Group Policy set up.

Edit (01/16/2012) It appears you can get around this by adding the necessary property to the page header.

Adding the following to the base page class that all pages inherit from will ensure all pages render in IE8 standard mode (not compatibility mode) even if viewing from Intranet which defaults to compatibility mode.

Response.AddHeader("X-UA-Compatible", "IE=EmulateIE8"); 

More info

Advertisements

2 thoughts on “IE 8 Standard Mode vs Compatibility Mode

  1. Hi Derek,

    I’m very much confused about my problem.

    Previously my was running in IE6. Now we want to run it in IE8.
    The user wants to run it without compatibility view settings in IE8. But withe settings OFF there are lot of problems.
    In our site no JSP uses the .
    We use our own custom tags.
    I’ve used both

    &

    in some of my pages, but the result is unchanged.
    The user want that it should behave same way in IE6 & IE8(compatibility settings ON & OFF).

    Can u plz suggest me any solution for this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s