html5shiv
html5shiv copied to clipboard
aFarkas
html5shiv requires explicit "<body>" tag
According to the spec, the <body> tag is optional. However it seems that it is necessary to explicitly include it for html5shiv to work.
For example this works:
<!doctype html>
<title>Example</title>
<style>header {display: block;}</style>
<script src="html5shiv.js"></script>
<body>
<header>Example</header>
But if you take out the <body> tag then the page will be blank.
Not a big deal, but maybe could be mentioned in the "Known issues" section.
It is a big deal IMO, this just cost me quite some time to find out why we were getting a blank screen on IE8.
This works:
<!doctype html>
<title>jquery-test.html</title>
<script src="html5shiv.js"></script>
<body>
<header>
<hr>
</header>
<script src="jquery-1.10.2.js"></script>
</body>
This crashes with an obscure jQuery error:
<!doctype html>
<title>jquery-test.html</title>
<script src="html5shiv.js"></script>
<header>
<hr>
</header>
<script src="jquery-1.10.2.js"></script>
Unknown runtime error jquery-1.10.2.js, line 3489 character 3 line 3489:
div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";
I'm not fully convinced, that we should document every edge case. html5shiv simply adds the capability of using the new elements, it does not implement the HTML -> DOM parsing algorythm. This should be clear. The browser including IE8 simply auto inserts the body on the first element, which has to be in the body. There are only some bugs in IE, that unknown elements (like HTML5 ones), div and form elements do not trigger this insert. This means the following code works again:
<!doctype html>
<title>jquery-test.html</title>
<script src="html5shiv.js"></script>
<hr />
<header>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Or even a textnode is good enough for this:
<!doctype html>
<title>jquery-test.html</title>
<script src="html5shiv.js"></script>
<hr />
<header>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This said: Especially, if you work with a CMS and you are using multiple different templates, it is always bad to omit html, head and body. Because you do not have full control, where it is inserted (although modern browsers are doing it consistent way.)
