Jorge Pedret

You built your whole website using html5 new shiny tags, you’re so proud of yourself, it looks great in your development browser!!

It’s finally time to give it a test in Internet Explorer, let’s see how it looks like…

WHAT??? That looks a lot worst than I was expecting… What the heck is going on?

You try changing your css, but explorer doesn’t change at all… You verify if you’re actually working on the right file, and yes in deed, you are. You try to add some basic css properties, but again, it doesn’t change a bit. The problem is…

Internet Explorer completely ignores html5 new tags

OMG! Until when this stupid browser is going to give me head aches – you say out loud.

At this point you have two options:

1. Change your entire markup and css to use old tags
2. Use Remy Sharp’s fix. The only downsize: It completely depends on Javascript

IE simply ignores all the elements it doesn’t recognize, regardless of CSS. By using javascript’s function document.createElement(), we iterate through the markup and recreate all the tags that are not recognized by IE.

Quick copy/paste solution

Here is the code taken directly from Remy’s site:

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

I’m thinking it might be a good idea to condition the code to IE versions lower than 8, since IE9 will have html5 support and it might be coming soon, but that’s up to you:

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

I feel stupid for not being aware and for not testing earlier in IE. It took me a while to figure out what was going on.

Get more information from this sites:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
http://remysharp.com/2009/01/07/html5-enabling-script/