WordPress page switches to quirks mode if viewed in ie9. Why?

Today I encountered a strange issue. I was working on a wordpress site for which I created a new wordpress page template for my homepage. When I tested the page in Internet Explorer and tried to view it in earlier versions of ie (I have version 10), the document mode was switching to quirks mode when I was trying to view the site in IE9 browser mode (through F12).

I applied the solution with the meta tag

<meta http-equiv="x-ua-compatible" content="IE=edge">

which obviously forces Internet explorer to show the page according to the latest standards of the specific version. Well, I tested again the page in IE9 browser mode, the quirks mode didn’t appear, problem solved… or not?

Not!. My client told me “I asked specifically that the site displays well in IE, what’s wrong with you?”. I got stressed.

Luckily, people had the same problem as me before and the solution was there. The problem is that because I created a separate page template for my homepage, the comment in the beginning of the template file, which declares the template for the wordpress installation, drove IE crazy. For avoiding the switch to quirks mode, it is ESSENTIAL that no lines above the <doctype> declaration are there. No comments, nothing. The file header.php didn’t have anything above the <doctype>, but the php file responsible for the extra page template did have. The solution is to declare again the same <doctype> as in header.php, just above the comment that defines the extra page template. This is not bad practice as the extra template file loads the header (with the initial doctype) later.

I hope this will help someone as it helped me.