Are You Sure You’re Testing IE8? How to Avoid Triggering Compatibility View

IE8 Compatibility ViewIn my recent post about an IE CSS bug, I noted that the issue appeared in IE8 when running on a local server but not when the file was uploaded to the internet. Fortunately, Florent V solved the mystery: IE8 was automatically switching to Compatibility View. But why does that happen?

What is Compatibility View?

Following the numerous problems encountered when upgrading from IE6 to IE7, Microsoft introduced Compatibility View in IE8. The feature switches the browser to an IE7-like rendering engine if a user encounters problems viewing a page in IE8. In theory, a page that exploited IE7’s bugs and quirks can still be displayed in the newer browser.

(Note that IE7 and IE8 Compatibility View are similar but not 100% identical … thanks, Microsoft!)

When does IE8 switch to Compatibility View?

There are several ways to switch to Compatibility View:

1. Manual switch
If the mode is not already activated, you can switch to Compatibility View by clicking the icon at the end of the address bar.

Compatibility View icon

2. All websites
In the Tools > Compatibility View Settings dialog, there is an option to display all websites in Compatibility View. This is switched off by default.

3. Microsoft website list
Microsoft compiles a list of websites where Compatibility View is required. The list is generated by the frequency of users clicking the Compatibility View icon and human verification — you can view it at res://iecompat.dll/iecompatdata.xml (IE only).

The file is distributed to all IE8 users and sites on the list are automatically displayed in the IE7-like view. The setting is normally enabled.

4. Intranet sites
By default, IE8 displays all intranet sites in Compatibility View. It’s understandable why Microsoft implemented the feature: many internal corporate web applications were developed specifically for older versions of IE several years ago.

Unfortunately, it’s this option which can trigger your latest and greatest web application work incorrectly when testing on a local server.

How does IE8 identify an intranet page?

It’s a little difficult to determine how and when IE8 identifies a page as belonging to an intranet. From my own investigation, it seems that a domain name without a period (.) is assumed to be on an intranet. Usually, non-period names are available on corporate networks with a domain server or when a domain resolution is specified in your PC’s hosts file, e.g.

mydomain 127.0.0.1

However, browsing to localhost, 127.0.0.1, or any network IP address (usually 192.168.x.x) is assumed to be an internet zone and will not trigger Compatibility Mode.

How to disable Compatibility View

When you’re testing a web application in IE8, it’s critical to know which rendering engine is being used. I’d therefore recommend disabling Compatibility View when testing sites on local PCs or servers. In IE, select Tools > Compatibility View Settings, then untick the Display intranet sites in Compatibility View box.

Compatibility View Settings

I hope that helps. Has Compatibility View ever caught you out?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jasonkarns

    If you turn on IE8 Developer tools (just hit F12) you can manually switch between IE7 mode, IE8 Compatibility mode, and strict IE8 mode with a single click on the Dev toolbar. I use it for testing IE7/IE8 without using an IE7 VM. Still need a VM for IE6, though.

  • Tutorial_Review

    Not particularly sure why you would actually want to test IE8, but if you really wanted to, then this is useful to stop any confusion!

    Just download Google Chrome though!

    Visit: The Tutorial and Review

    Follow on Twitter: @Tutorial_Review

  • http://www.optimalworks.net/ Craig Buckler

    @Tutorial_Review
    I’d recommend testing in as many browsers as possible, including IE8 and IE7. But you should be careful that IE8 isn’t masquerading as IE7 and confusing the test results!

  • http://fcOnTheWeb.com ferrari_chris

    I had big problems with this, or similar. And the dev toolbar turned out to be the issue. Once I started switching browser modes (as jasonkarns suggests) I found the display wasn’t correct when I went back to the original – so it was fine in IE8, switch to IE7 mode and it’s broken, back to IE* and it’s now broken. But colleagues’ machines who hadn’t played with the dev toolbar didn’t have the broken IE8 version…

    I ended up completely resetting the browser (through the Tools somewhere) and now I don’t touch that switch any more as it’s more trouble than it’s worth.

  • http://www.waldenponder.com Hyperbolik

    Does it scare the bejeusus out of anyone else that IE is using some level of intelligence to figure out if it should render the website in IE7 (sort of) or IE8? From a web developers perspective this idea could grow too large to handle and set a standard for browsers to “out-think” the developers. Nothing positive can come at the end of this path.

    Microsoft, you’ve already horked things up by supporting IE6 far too long. Keep your grubby fingers out of my job and let me develop for the differences in browsers!

  • http://www.linkedin.com/in/frederikvanzande Fre420

    You want to test IE8 especially if you animate transparency on blocks … It can do some strange stuff with it (you’ll need to give every element a background etc …)

  • dakine

    What’s wrong with forcing compat mode with meta tags? It’s the best way to make sure everyone see’s the same thing and often the only way to make IE play nice when you code sites to use the same styles cross browser, not using IE conditionals.

  • rozner

    This got me, we upgraded one of our Intranets to support IE8 a little while ago. Recently someone reported a bug that I couldn’t reproduce, but on my colleagues system I could see the problem. Eventually I figured out it was running compatibility mode on mine.

  • http://www.optimalworks.net/ Craig Buckler

    @dakine
    Actually, MS did propose a meta-tag trigger but it caused uproar (for good reason). This article provides a little background history…

  • http://fvsch.com Florent V.

    @craigbuckler
    Thanks for the mention.
    Regarding forcing the compat or IE8 mode: this might be a good solution if you require either mode and can’t control exactly in what context your code will be deployed. I’d rather do it with the HTTP header rather than the meta tag, but that’s not always convenient. Of course, unless you’re working on a legacy website that requires compatibility mode, you’re better off asking for IE8 rendering mode when available.

  • Stevie D

    @dakine:

    What’s wrong with forcing compat mode with meta tags?

    What’s wrong with it is that it just plain wouldn’t work. Generally, the reason that websites need compatibility mode is because they were written in the Dark Ages by people who don’t understand good practice in web development. Some of them are no longer being maintained at all. These are not the kind of sites that you can rely on to add a tag to every page to ensure they display properly!

  • dakine

    @Stevie D, Craig

    I guess I’ll be off to run some litmus tests. It’s odd because I’ll put code up a design check it cross browser and there is normally only one or two minor issues in IE with which applying that tag fixes, and we’re forced to do cross browser checks here at work. It’s definantly something I’ll be looking deeper into as something else must be going on here…

    Cheers,
    Mark

  • dakine

    I honestly don’t see why people are complaining so much, I write clean xhtml/css (we were even forced to code for backward compat to IE6 until the start of this year) and I have never had any major issues with coding cross browser, nor have I ever had to use an IE only stylesheet, sometime’s I’ve had to rethink the layout and structure of the markup but never have I been allowed to change the designer’s designs to fit the browser and we aren’t some crappy web design studio putting together plain blocky solid layouts, we do all sorts of things that push the limits of the browsers and can prove it with our portfolio. The ONLY time I’ve had issues cross browser is when it come’s to JavaScript and issues with the DOM, but even that is a blue moon occurance. Frankly I love hearing other people having such a hard time, makes me feel safer in my job =)

    Cheers,
    Mark

  • Anonymous

    @dakine

    Do you have an online portfolio or blog posts describing your method of development? I’d love to see some of your sites and how you avoided IE6’s most heinous layout bugs (especially those involving hasLayout or floating)

  • dakine

    @anon

    http://www.mediasuite.co.nz is our company site which contains our portfolio. I must confess though, I forgot that we do use IE only stylesheets (for IE6) when we have transparent PNG’s, but that’s the only instance we use them though.

  • http://www.article-elf.com/ forex robot

    What a great resource!

  • Tutorial_Review

    @Craig Buckler

    I have tested IE8 but still not happy with the performance and security of it though, still use it to check compatibility of the websites I create though, along with Chrome, Firefox and Safari.