HTML5 shiv are also needed for IE9 in order to support HTML5 elements

am_ picture am_ · Feb 15, 2013 · Viewed 14k times · Source

I use the following HTML5 elements in my pages: header, article, section and nav. Now I've set all the above HTML5 elements as display: block, and I include the HTML5 shiv with a conditional statement in the header:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

The site works fine in IE7 & IE8 - indicating that html5shiv is indeed doing it's magic. However when I test the site in IE9 it lacks styling for all the content inside HTML5 elements.

As soon as I change the conditional statement to:

<!--[if IE]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

The html5 elements and it's children now get the correct styling applied. I doublechecked my IE version and it says I have IE version 9.0.8112.16421.

I should also mention that the sites are built with PHP and cached through the use of PEAR's Cache_Lite. However tests done on a simple static html page give the same results for me.

Any ideas??

Answer

am_ picture am_ · Feb 15, 2013

I finally managed to figure out what the problem was. I had a comment at the top of my site, before the doctype html tag. That seems to break IE9's ability to recognize the HTML5 elements.

This is what I had:

<!-- Served From Cache: Wednesday 13th of February 2013 03:02:22 PM -->
<!DOCTYPE html>
<html>
    <head>

So I was then able to fix this by moving the comment down beneath the doctype.