IE11 DOM规范化不适用于表行

Question

我想规范化表行.除了IE(用IE 11测试)之外,这就像魅力一样.

我已经创建了一个演示代码片段来演示这个问题:

$(function() {
  $("table tbody tr span").each(function() {
    var $this = $(this);
    var $parent = $this.parent();
    $this.replaceWith($this.html());
    $parent[0].normalize();
  });
});

<link href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>President</th>
      <th>Birthplace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Zach</span>ary Taylor</td>
      <td>Barboursville, Virginia</td>
    </tr>
  </tbody>
</table>

这会将<span>元素替换为其内容.在此步骤之后,节点将如下所示:

然后,normalize()调用合并分割的文本节点.但是,在IE11中,文本节点仍然是分开的.

我无法看到任何问题.这个问题的原因是什么,可能是什么解决方案？

---

事实证明这是一个IE11错误,我填写了错误报告!

Answer 1

如果您的开发人员工具栏打开，则 IE-11 似乎无法规范已属于文档一部分的元素。

这也与 IE9 和 10 相关（通过使用meta http-equiv="X-UA-Compatible"标签模拟）

当您只创建新节点并且不将它们附加到文档时 - 一切都很好（对于这两种情况 - 开发人员工具栏打开和关闭）：

d = document.createElement('div');
d.appendChild(document.createTextNode('text 1'));
d.appendChild(document.createTextNode('text 2'));
console.log(d.childNodes.length + ' - Should be 2')
d.normalize();
console.log(d.childNodes.length + ' - Should be 1')

但是，如果您使用的节点已经是文档的一部分，则当开发人员工具栏打开时，normalize该功能将不起作用：

d = document.getElementsByTagName('div')[0];
d.appendChild(document.createTextNode('text 1'));
d.appendChild(document.createTextNode('text 2'));
console.log(d.childNodes.length + ' - should be 2 on every browser')
d.normalize();
console.log(d.childNodes.length + ' - should be 1, however it\'s 2 on IE')

<div></div>

如果你真的想要，你可以做的是从文档中提取节点并在规范化它们后添加它们：

d = document.getElementsByTagName('div')[0];
d.appendChild(document.createTextNode('text 1'));
d.appendChild(document.createTextNode('text 2'));
console.log(d.childNodes.length + ' - should be 2 on every browser')

dNew = d.cloneNode(true)
dNew.normalize()
d.parentElement.replaceChild(dNew, d)

d = document.getElementsByTagName('div')[0];
console.log(d.childNodes.length + ' - should be 1 on every browser')

<div></div>

更新 - 28/8
答案在 @dude 发表评论后更新。我花了一些时间来调查这里的原因，但我认为现在我已经涵盖了所有内容。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">请注意，对于 IE8（在 IE-11 中使用强制），该normalize()函数适用于 DOM 树中的元素和不在 DOM 树中的元素，即使开发人员工具栏打开也是如此。