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

Question

On certain page on my site, Internet Explorer automatically switches to compatibility mode and tries to render the page in compatibility view (IE7 mode). Also the URL gets added to the compatibility view list.

Adventurism

Hi, can you provide the link to that page ? Otherwise, there are TOO many ways to trigger compatibility mode. – Potboy

I have shared this in Q&A format of stackoverflow :-) The problem is resolved with the answer below. – Adventurism

Answer 1

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.

Adventurism

Wow, is the Type 1 font still an issue in IE9 and 10? – Satchel

Yeah ... and seems Microsoft knew it before release of IE 10 but still decided to not to fix it. – Adventurism

Thanks so much! This solved an issue I was having with video.js that was driving me insane. – Dragon

No matter how long we develop for we can always count on being unpleasantly surprised by the lameness of any version of IE! – Mesozoic