html5shiv requires explicit "<body>" tag #100

davidrl · 2013-04-28T19:52:11Z

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.

The text was updated successfully, but these errors were encountered:

stijnherreman · 2013-11-21T11:14:55Z

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>";

aFarkas · 2013-11-21T12:44:31Z

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.)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

html5shiv requires explicit "<body>" tag #100

html5shiv requires explicit "<body>" tag #100

davidrl commented Apr 28, 2013

stijnherreman commented Nov 21, 2013

aFarkas commented Nov 21, 2013

html5shiv requires explicit "<body>" tag #100

html5shiv requires explicit "<body>" tag #100

Comments

davidrl commented Apr 28, 2013

stijnherreman commented Nov 21, 2013

aFarkas commented Nov 21, 2013