Internet Explorer Automatically Switches to Compatibility Mode (IE9 and Ie10)

Internet Explorer automatically switches to compatibility mode (IE9 and IE10)

In my case, it happened due to some CSS using Type 1 font (Helvetica).

Internet Explorer changed its font-rendering from IE9 (affects IE10 as well) which does not support the old Type 1 fonts. But still some users manually install fonts (for me, it was Helvetica, tested on Windows 7, IE9 and IE10 both).

Now if you use CSS like:
font-family: Helvetica, Arial, sans-serif;
rather than falling back for Arial, IE9 and IE10 switch to compatibility mode.

More details can be found at: http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html

As per the mentioned blog post, following approaches would help resolve the problem for the web developers:

• Don't use Helvetica or other non-standard fonts in your CSS
• Use a substitute web font with the CSS @font-face feature to serve up your desired fonts
• Use an online web fonts service like webfonts.fonts.com
• Use Conditional Comments to create IE9 specific stylesheets.

Compatibility View settings inside IE9 to Edge

The "IE=edge" notation is used in IE to the browser to use the best available rendering mode. This basically means that IE8 will be forced to use IE8 mode, IE9 will be forced to use IE9 mode, IE10 will use IE10 mode, and IE11 will use IE11 mode.

The purpose of this flag is to override anything else (such as local browser config settings) that might be telling IE to go into an older compatibility mode instead of it's normal mode.

The word "edge" is a specific keyword that triggers this functionality; you can't replace it with anything else and get the same results.

"Edge" in this context is a reference to "the cutting edge", ie the most advanced version.

Please note: This usage of the word "Edge" is entirely unrelated to the name that Microsoft have given their new Edge browser.

What is the difference between IE11 compatibility mode and IE10 compatibility mode

There isn't just one "compatibility mode", but several.

All IE versions between v8 and v11 offer compatibility modes. There is a compatibility mode available for each previous version of IE as far back as IE7.

Therefore IE8 offers IE7-compatibility mode, IE9 offers modes for IE8 and IE7 compatibility, IE10 has modes for IE7, IE8 and IE9 compatibility, and IE11 offers modes for IE7, IE8, IE9 and IE10.

Between all the browser versions, the compatibility modes are reasonably consistent. Thus IE7 mode works much the same in IE8 as it does in IE11.

There is also a thing called Quirks Mode, which is a compatibility mode for IE5.5. Note that in IE11, there are two different Quirks Modes. The original quirks mode continues to work exactly as it always did in IE10 and earlier. This means that in addition to changing the rendering layout, it also switches off all the new browser features so that it works as close to IE5.5 as possible. However the newer quirks mode in IE11 doesn't do this; it just changes the rendering mode. This makes it work more like quirks mode in other browsers. IE11 has both of these modes, but IE10 only has the original one. Depending on how you trigger quirks mode, therefore, you may find it working differently. If you want it working the same between both IE10 and IE11, you need to make sure you use the original quirks mode.

Note that Microsoft's new browser Edge, which replaces IE, does not support any of these compatibility modes or quirks modes. You should therefore avoid relying on them, because IE will eventually disappear in favour of Edge.

Why does IE9 switch to compatibility mode on my website?

Works in IE9 documentMode for me.

Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:

• whether the user has clicked the ‘compatibility view’ button in that domain before;
• perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
• whether the user has opted to put all sites in compatibility view by default;
• whether IE thinks the site is on your intranet and so defaults to compatibility view;
• whether the site in question is in Microsoft's own list of websites that require compatibility view.

You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.

As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

or the HTTP header:

X-UA-Compatible: IE=Edge

to get the latest renderer whatever IE version is in use.

Why does IE9 change to Compatibility View mode automatically?

Intranet sites by default are loaded in compatibility mode by default.

You need to use a X-UA-Compatible meta tag to achieve what you want in intranet sites without change IE settings.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Since you making it compatible with IE9 looks like you are using many Web Standards. So I reccomend you say do IE to use the newer engine available instead of just fix it to IE9:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

In this case if you are using IE10 or IE11 (currently in preview) it will use their best engine instead of always IE9.

More information about Specifying legacy document modes.

Why does IE9 give the option to render in compatibility mode

Ok finally managed to get rid of compatibility mode icon from IE9. Id tried putting the meta tag in various position within the code. But always seemed to have the option to run in compatibility mode.

But adding the following to the .htaccess file soloved it for me.

Header set X-UA-Compatible "IE=edge"

---

Related Topics