IE Fallback Strategy Using Google HTML5Shiv
Nov 09, 2011
When you start building your website using HTML5 markup you will be surprised at the amount of issues you experience, especially with older versions of Internet Explorer.
Older versions of Internet Explorer (IE 6,7 or 8) don’t have the support needed for the new HTML5 structural elements such as: header, footer, section, aside, article, etc .
These browsers don’t understand those elements so when they render a page that is built in HTML5 they will omit them, thus-creating layout and styling issues.
There are many JavaScript workarounds that allow your older IE to understand the new semantic elements. In my research I found one that is very useful:
HTML5shiv
How to use it:Go here for the latest release.
- Include the following script before <body> in the <head> tag like this:
<head> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>- Now it is ready to use. You must have JavaScript enabled in your browser or it will not work.
Issues when appending content
Keep in mind that your page can break if you append content using innerHTML like this:
var x = document.createElement("div");
x.innerHTML = "<section>content here</section>";
document.body.appendChild(s);
You can fix this with jQuery using a second parameter as false in this function:
$("div").append(innerShiv("<section>content here</section>", false));
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.