Issue with IE8 and querySelectorAll() returning an element with only the opening HTML tag

Question

My webpage is not rending the content in the <main class="page-content"></main> tag in IE8. I am using the backbone.js framework, and I have a view appending elements onto the page. I also using html5shiv.

The first elements append just find (a navigation bar and all its elements); however, IE8 throws an error when it tries to append the .page-content element. I have traced the issue to an inconsistency in jQuery's find method. In IE8 only, when performing a .find('.page-content') on a DOM containing the tag, the method returns an element with the .outerHTML property set to <MAIN class=page-content>. Notice that the closing tag (and all the inner elements) is missing. This only happens in IE8 (I haven't tested >IE8 yet), and when it happens, it causes appendChild() method to fail inside jQuery's append() method.

I dug deeper into the jQuery's find method, and found that the source of the problem was when jQuery uses the Web API method querySelectorAll(). In jQuery's code, the developers commented the following:

// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements

However, I don't really know what this means...

I have created a jsFiddle example to demonstrate this issue: http://jsfiddle.net/VHL7Q/6/

If you open up the jsFiddle link in IE8, an alert will display:

<MAIN class=page-content>

Alternatively, if you open the jsFiddle link in Chrome or Firefox, an alert will display:

<main class="page-content">
    <div class="help-toggle">
        <i class="icon-info-sign"></i>
    </div>
</main>

Short of righting my own find method for traversing the DOM tree, I don't know how to begin solving this problem.

NOTE: a "band-aid" type solution that seemed to work was to replace the <main></main> tag with a <div></div> tag. I cannot use this solution permanently however; I need help finding a way to use the <main></main> tag.

Answer 1

The trouble is that IE8 does not fully support HTML5. In particular, it has no idea what the element main is.

Some of these issues can be resolved by using an HTML5 Shim, but I don't know if it is 100% compatible.

Link explanation: (The shim, in short, runs a document.elementCreate for all of the new HTML5 elements to kickstart the IE8 into realizing they exist.)

Answer 2

After six days of digging, I did what I should have done on day one. I updated my html5shiv and modernizr to their newest versions. Specifically I updated html5shiv from 3.6.1 to 3.7.0, and I updated modernizr from 2.5.3 to 2.7.1.

This does not directly answer my questions about the detailed functionality of jQuery and Web API, but it can be assumed that the newest version of a library might fix your problems with a five year old software product.

Thank you Jeremy and cookie monster for your help.