html5 new elements (header, nav, footer, ..) not working in IE

You need to use HTML5 Shim. Here is a detailed explanation as to why this is needed.

To use HTML5 Shim, you just need to add the following within your page's <head> above all your CSS declarations:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Another option is to use Modernizr, which includes the HTML5 Shiv and also provides HTML5 feature detection.

HTML 5 elements in IE Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS. you’ll also probably want to set many of these elements to display:block; see the HTML5 Boilerplate CSS for an example. As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library. Both also enable printability of HTML5 elements in IE6-8, though you might want to try out the performance hit if you have over 100kb of css.

Supported browsers We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we’re still doing more testing we believe we support Blackberry 6+. ~ http://modernizr.com/docs/#html5inie

The following tags at least: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section


You need to include the HTML5 shiv script in order to allow styling of HTML5 elements in older IE browsers: http://code.google.com/p/html5shiv/

To use, include the following script in your element above your CSS:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Tags:

Html