Search code examples
htmlinternet-explorer-8internet-explorer-9quirks-mode

Can't find why IE 8-9 goes in quirks mode on an HTML5 page


This is the URL: http://sdc.sciamanna.eu/ IE 8 and 9 goes to quirks mode and I don't know why.

I've spent the last two hours looking for a solution, searching here in SO, in Google, line by line in my html page, but I can't find what is causing IE to go in quirks mode.

What I did so far:

  • removed an HTML comment before the DOCTYPE.
  • removed all the conditional html tags (now rolled back, since nothing changed), thinking that modernizr may take care of that
  • replaced the meta <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> with <?php header("X-UA-Compatible", "IE=edge,chrome=1");?> as I had validation issues (but again, rolled back as it wasn't the cause)
  • did all the stuff above at the same time (this only helped me to get a green light from W3C validator, for what is worth)
  • slammed my head on the desk a couple of times: this, really, didn't help

Really, I can't get out of this issue. I don't know if this happens with IE10 as well, but I'm quite sure it does.

UPDATE

This page (the HTML theme from which is based my WordPress theme) works. It doesn't even use Modernizr, but just "http://html5shim.googlecode.com/svn/trunk/html5.js": I've started using the same script, but things where even worse when, as almost nothing were rendered properly; modernizr at least manage to make most of the things works properly. But the fact that the default html5shim works in the original theme, only give me another confirmation that there must be something wrong in my implementation: I just can't find what.

Both themes (iBlink and mine) makes use of HTML5 tags, but the original one has no issues at all, while mine, as you can see, does.


Solution

  • It seems that the actual solution it to use Modernizr: I wasn't see immediate results, probably because of browser caching.