HTML5 tags in IE 8 & IE 7

Question

Hi as I mentioned in title, in Firefox (firebug), IE-9/10, Chrome it shows properly like:

    
...



        

Answer 1

IE7/8 do not support the new HTML5 tags like footer.

If you use them, you will get issues like this, and rendering glitches as a result.

There are work-arounds in the form of the html5shiv and Modernizr polyfill scripts. Use one of these libraries to add support for HTML5 tags to old IE versions.

If you're not prepared to use a Javascript library to fix IE's HTML5 support, the other option is to stop using these tags and switch back to using <div> tags for everything, with classes to identify them semantically.

Answer 2

I just use this to enable HTML5 elements in IE:

<script>
'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)});
<script>

Answer 3

It sounds like you need to use the HTML 5 shim and selectivizr to add CSS support for advanced selector types (e.g. :nth-child) to old versions of IE.

http://html5shim.googlecode.com/svn/trunk/html5.js https://github.com/keithclark/selectivizr/blob/master/selectivizr.js

Include both of these in your page in IE conditional comments and it should fix your problem.