Typekit, non-ascii & IE8

IE 8 goes in Compatibilty Mode

Oh my… shock, horror, what’s going on?
That was my primary reaction when I noticed that in Internet Explorer 8 my website went into compatibility mode when displayed. And that is horror. (Luckily only 10% of my visitors use IE 8.)

What happens exactly

When my site displayed in IE 8 it seemed to load ok, inlcuding all layout, fonts and stuff, and than in a flash it misformed (a little, but too much already), the compatibilty mode-button was shown active, and a message pop ups saying that my browser went into compatibilty mode because there were problems displaying the content of the page. It didn’t specify what problems exactly…

What is the cause

A search on Google did not reveal a whole lot, except that it happens sometimes. I found some stuff on JavaScript, and on disabling a font. I tested without JavaScript and it seemed to display alright. So my first more spcific test was to disable Typekit, as it involves JavaScript and specific fonts. This helped. But of course I didn’t want to disable Typekit, as I have carefully chosen my font family.

What is the solution

I use a few non-ascii characters on my page. If you’re not watching this page with IE 8, you will find arrows in the breadcrumbs, as bullet for list items and after the read more links. I add them with css, with a :before or :after pseudo element. I took them all out, and guess what, everything’s fine in IE 8!
I quickly put those styles back and overwrote them in a IE 8-specific stylesheet.

As far as my test show, be careful with the combination of non-ascii characters, Typekit and IE 8. Drop one of these three as you like, just don’t use them together.