]> HTML 5 not working on IE? | FoxCNS Blog

FoxCNS - Computer & Networking Services - Portable IT Department, Denver metro area, front range, Arvada, Lakewood, Wheat Ridge, Small Business

HTML 5 not working on IE? « FoxCNS Blog - Computer & Networking Services - Portable IT Department, Denver metro area, front range, Arvada, Lakewood, Wheat Ridge, Small Business, PSP Repair

HTML 5 not working on IE?

Use HTML 5 with Internet Explorer
HTML 5 has emerged as the newest standard for coding websites. The improvements and additions to the language make it a lot more functional, so content rich websites will be much easier to access and index in the future.

As many of you know, using anything new as far as HTML and CSS goes is prone to make trouble with any one or all of the various versions of Internet Explorer. HTML 5 is, of course, no exception.

It seems that the new HTML 5 elements won’t work on anything less than Internet Explorer 9. This is because none of those elements exist in Internet Explorer’s Document Object Model (DOM).

There is, however, an easy way to get these elements working in all versions of Internet Explorer. Simply add the elements using a small script:

(function(){
	if(!/*@cc_on!@*/0)return;
	var e = "abbr,article,aside,audio,sbb,canvas,
	datagrid,datalist,details,dialog,eventsource,
	figure,figcaption,footer,header,hgroup,mark,
	menu,meter,nav,output,progress,section,summary,
	time,video".split(',');
	for(var i=0;i<e.length;i++){
		document.createElement(e[i])
	}
})()

The above script simply adds all the new HTML 5 elements to Internet Explorer’s DOM by creating elements with the correct tag names. If you find you need another tag that is not on the list but is valid HTML 5 you can simply add it to the script.

If you want to be sure that only the versions of IE that need the script will see it, we recommend using conditional commenting like this:

<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
	if(!/*@cc_on!@*/0)return;
	var e = "abbr,article,aside,audio,sbb,canvas,
	datagrid,datalist,details,dialog,eventsource,
	figure,figcaption,footer,header,hgroup,mark,
	menu,meter,nav,output,progress,section,summary,
	time,video".split(',');
	for(var i=0;i<e.length;i++){
		document.createElement(e[i])
	}
})()
</script>
<![endif]-->

Also take note of your CSS styling of these elements, you may need to be more specific with your styles. For example, there are no base styles at all for those new elements so you’ll need to set display to block and so on.

We were somewhat surprised to find that HTML 5 elements are non-functional on IE 8, but we’re very encouraged by what we’ve been reading about Internet Explorer 9. From what we’ve been hearing the new version of IE will support some great new features from HTML 5 / CSS 3 and it has a faster java scripting engine. It’s great to see Microsoft finally paying attention.

We have talked a lot about IE, but it’s not the best choice for a browser at the moment and we hope our readers will consider other modern browsers instead of or in combination with IE.


Leave a Reply

 

Contact FoxCNS to find out more about our technology solutions »