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.