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