将选择设置为节点的边缘会使WebKit报告的范围不一致

假设以下DOM树:

<div id="edit" contenteditable="true">
  this content <a id="link" href="http://www.google.com/">contains</a> a link
</div>

然后创建一个范围 之后 锚:

var r = document.createRange();
var link = document.getElementById('link');
r.setStartAfter(link);
r.setEndAfter(link);

正如预期的那样 commonAncestorContainer 是id为的元素 edit :

console.log(r.commonAncestorContainer);  /* => <div id="edit" contenteditable="true">…</div> */

将选择设置为此范围:

var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

现在查询窗口中的当前选择范围,并检查其 commonAncestor容器 :

var r2 = s.getRangeAt(0);
console.log(r2.commonAncestorContainer);

你会发现,在Firefox中,结果是意料之中的;与id相同的元素 编辑 .

然而,在WebKit浏览器中,选择范围的祖先容器突然变成了锚点内的文本节点; "contains" ,但当你开始打字时,你会发现你真的不在锚内。世界跆拳道联盟!?

Click here for a live demo .

这种行为背后有什么潜在的理由吗?有什么理由认为这不是WebKit漏洞吗??

谢谢你的0.02美元。