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
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.