IE8 和 querySelectorAll() 的问题返回仅具有开始 HTML 标记的元素答案

【问题标题】：Issue with IE8 and querySelectorAll() returning an element with only the opening HTML tagIE8 和 querySelectorAll() 的问题返回仅具有开始 HTML 标记的元素
【发布时间】：2014-04-07 20:02:51
【问题描述】：

我的网页没有在 IE8 中渲染 <main class="page-content"></main> 标签中的内容。我正在使用 backbone.js 框架，并且我有一个将元素附加到页面上的视图。我也使用 html5shiv。

添加的第一个元素只是找到（导航栏及其所有元素）；但是，IE8 在尝试附加 .page-content 元素时会引发错误。我已将此问题追溯到 jQuery 的 find 方法中的不一致。仅在 IE8 中，当在包含标签的 DOM 上执行 .find('.page-content') 时，该方法返回一个将 .outerHTML 属性设置为 <MAIN class=page-content> 的元素。请注意，缺少结束标记（以及所有内部元素）。这只发生在 IE8 中（我还没有测试过 >IE8），当它发生时，它会导致 appendChild() 方法在 jQuery 的 append() 方法中失败。

我深入挖掘了jQuery的find方法，发现问题的根源是jQuery使用Web API方法querySelectorAll()的时候。在 jQuery 的代码中，开发者注释如下：

// 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

但是，我真的不知道这意味着什么......

我创建了一个 jsFiddle 示例来演示这个问题：http://jsfiddle.net/VHL7Q/6/

如果在 IE8 中打开 jsFiddle 链接，会显示警告：

<MAIN class=page-content>

或者，如果您在 Chrome 或 Firefox 中打开 jsFiddle 链接，则会显示警报：

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

没有纠正我自己的遍历 DOM 树的 find 方法，我不知道如何开始解决这个问题。

注意：似乎有效的“创可贴”类型的解决方案是将<main></main> 标记替换为<div></div> 标记。但是，我不能永久使用此解决方案；我需要帮助找到使用<main></main> 标签的方法。

【问题讨论】：

main 是一个自定义标签。阅读在 IE 中使用自定义标签，或者只使用标准标签。
...以及 jQuery 的注释，即 "qSA 在基于元素的查询中奇怪地工作"，应该更像 "qSA doesn't work它们是我们想要的方式，因此我们通过修改您提供的选择器来更改选择器的解释方式”。问题是选择器正如预期的那样被解释为适用于整个文档。因此，如果您在p 元素上搜索span，并且您使用的选择器是"div span"，则qSA 将返回p 在div 内的匹配项，从那时起span 也在 div 内，使选择器匹配。
...jQuery 对其进行了更改，以便选择器仅应用于以 p 元素开头的子 DOM 结构（在上面的示例中），因此它仅在 div 时匹配实际上也在p内，（这将是无效的标记，但这是题外话）
感谢 cookie 怪物帮助我们渡过了模糊的 cmets。
是的，对不起，我应该从IE8的角度说，它是一个自定义标签。

标签： javascript jquery html internet-explorer-8 selectors-api

【解决方案1】：

问题在于 IE8 不完全支持 HTML5。特别是它不知道main 是什么元素。

其中一些问题可以通过使用HTML5 Shim 来解决，但我不知道它是否 100% 兼容。

链接说明： （简而言之，shim 为所有新的 HTML5 元素运行 document.elementCreate，以启动 IE8 以实现它们的存在。）

【讨论】：

【解决方案2】：

经过六天的挖掘，我做了第一天应该做的事情。我将我的 html5shiv 和 modernizr 更新到了最新版本。具体来说，我将 html5shiv 从 3.6.1 更新为 3.7.0，并将 modernizr 从 2.5 更新.3 到 2.7.1。

这并不能直接回答我关于 jQuery 和 Web API 的详细功能的问题，但可以假设最新版本的库可能会解决您使用五年前的软件产品的问题。

感谢 Jeremy 和 cookie Monster 的帮助。

【讨论】：