This is another diamond in the rough I found today. We’re all moving to HTML5, but IE 6-8 has to make it difficult (what’s different, right?). Well, you can get IE to cooperate on a basic level with this little trick. See John Resig’s examples for simple instructions on how to use it. Basically, IE doesn’t recognize HTML5 elements unless you use Javascript to create the element:

document.createElement("section")


You don't even need to add the element to the page - the code above effectively "registers" the element with IE so that CSS styling will apply. Cool! A simple work around until IE 6-8 is phased out.

I put together a sample script to create every HTML5 in the document (along with some default styles based on the current version of Chrome). These should be used for development only:

CSS

/*----- HTML5 default display styles -----*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	display: block;
}

keygen, meter, progress {
	display: inline-block;
}

output {
	display: inline;
}

audio, canvas, embed, video {
	width: 300px;
}		

audio {
	height: 32px;
}

canvas, embed, video {
	height: 150px;
}

keygen {
	margin: 0em;
}

mark {
	background-color: yellow;
	color: black;
}

meter {
	width: 5em;
	height: 1em;
	vertical-align: -0.2em;
}

progress {
	width: 10em;
	height: 1em;
	vertical-align: -0.2em;
	background-color: gray;
}

Script

function IEHtmlStyle() {

	var tags = [
		{ 'tag': 'article', 'display': 'block' },
		{ 'tag': 'aside', 'display': 'block' },
		{ 'tag': 'audio', 'display': 'auto' },
		{ 'tag': 'canvas', 'display': 'auto' },
		{ 'tag': 'command', 'display': 'auto' },
		{ 'tag': 'datalist', 'display': 'auto' },
		{ 'tag': 'details', 'display': 'block' },
		{ 'tag': 'embed', 'display': 'auto' },
		{ 'tag': 'figcaption', 'display': 'block' },
		{ 'tag': 'figure', 'display': 'block' },
		{ 'tag': 'footer', 'display': 'block' },
		{ 'tag': 'header', 'display': 'block' },
		{ 'tag': 'hgroup', 'display': 'block' },
		{ 'tag': 'keygen', 'display': 'inline-block' },
		{ 'tag': 'mark', 'display': 'auto' },
		{ 'tag': 'meter', 'display': 'inline-block' },
		{ 'tag': 'nav', 'display': 'block' },
		{ 'tag': 'output', 'display': 'inline' },
		{ 'tag': 'progress', 'display': 'inline-block' },
		{ 'tag': 'rp', 'display': 'auto' },
		{ 'tag': 'rt', 'display': 'auto' },
		{ 'tag': 'ruby', 'display': 'auto' },
		{ 'tag': 'section', 'display': 'block' },
		{ 'tag': 'source', 'display': 'auto' },
		{ 'tag': 'summary', 'display': 'block' },
		{ 'tag': 'time', 'display': 'auto' },
		{ 'tag': 'video', 'display': 'auto' },
		{ 'tag': 'wbr', 'display': 'auto' }
	];

	this.reg = function() {

		for (var i = 0; i < tags.length; i++) {
			document.createElement(tags[i].tag);
		}

	};

}

var iehs = new IEHtmlStyle();
iehs.reg();