Internet Explorer 8 won't modify HTML5 tags in print stylesheet

Question

I was working on a print stylesheet earlier and came across a problem with IE8. I am using HTML5 and several layout tags including header, nav and footer.

For some reason in my print stylesheet the display:none; declaration on these tags is being ignored in IE8 (and I can only assume subsequent lower versions). I first thought that Developer Tools in IE9 could be causing a false representation, however I have a Windows XP installation in VirtualBox which shows the problem also.

My guess its because HTML5 tags aren't seen properly by anything below IE9. The print stylesheet hides the layout tags in Firefox and Chrome.

Is there anyway to get around this?

Edit:

Here is what I have at the moment:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/print.css" type="text/css" media="print" />

Ignore the PHP Statements, they are specific to my CMS which is WordPress.

Then I simply hide the layout tags in the print.css:

nav,footer { 
display:none;
}

This works for IE9, Firefox, Chrome but not in anything lower than IE9. It seems to ignore HTML5 tags.

Answer 1

I suggest you try html5shiv. The main shiv does document.createElement() as you have but it's been optimized / minified like crazy. More importantly, it includes printshiv (IE Print Protector) which will let you style HTML5 elements for print.