10

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

am_
  • 2,378
  • 1
  • 21
  • 28
  • what is the `doctype` of your html file? do you use `X-UA-COMPATIBLE`? btw. i think in the second example you mean ` – t.niese Feb 15 '13 at 11:55
  • as reccomended by HTML5. Beneath the head element I use . Thanks for noticing that, I updated my question - I use [if IE] – am_ Feb 15 '13 at 11:57
  • and you are sure that you dont use ` – t.niese Feb 15 '13 at 11:59
  • 2
    ...and you haven't set your IE to IE7/8 compatibility mode? – JJJ Feb 15 '13 at 12:08
  • That's correct, I haven't set it to comp. mode. If I however set it to compability mode, and refresh the page - it will render just fine. (as expected because of the HTML5 shiv). – am_ Feb 15 '13 at 12:20
  • No headers are sent with X-UA-Compatible, same for the meta tag. – am_ Feb 15 '13 at 12:46

2 Answers2

29

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.

am_
  • 2,378
  • 1
  • 21
  • 28
  • 12
    + 1 for coming back here and letting the community know. You might want to mark this as the correct answer too. As a general rule, nothing should ever become before the Doctype, because, as you have noticed, weird things start to happen! – Michael Giovanni Pumo Feb 15 '13 at 17:06
0

Try this code

<!--[if lt IE 9]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->
Sara Kahan
  • 35
  • 3
  • 3
    How does this help with the IE9 problem? – JJJ Feb 15 '13 at 12:09
  • 2
    Did you read the question? He's already using a shiv. *"As soon as I change the conditional statement to: ... The html5 elements and it's children now get the correct styling applied."* The OP wants to know why IE9 doesn't style the elements *without* a shiv, since IE9 should support HTML5 elements natively. In any case, writing ` – JJJ Feb 15 '13 at 12:14
  • The html5shiv code is no longer hosted on `googlecode`. It has moved to [Github](https://github.com/aFarkas/html5shiv/tree/master/dist). – Agi Hammerthief Sep 05 '17 at 09:37