Chrome 中的 Range.setStartAfter() 无法正确处理跨度或内联元素

Question

我有一个内容可编辑的 div。我有一些文本看起来像这样：

adsadsd <span>asdsa </span>  moretextasdasd

我正在尝试使用 Range.setStartAfter() 将插入符号设置在跨度标记的右侧。这在 IE 和 Firefox 中可以正常工作，但在 Chrome 中则不行。在 Chrome 中，插入符号位于 span 标记的末尾，而不是在其之后。
setStartBefore() 适用于所有浏览器。

如果它是 DIV 元素，但不是 span 元素，则它在 Chrome 中有效。

JSFiddle：https://jsfiddle.net/vXnCM/5234/

请注意，如果单击焦点然后开始输入，您将位于范围内，而不是像在 IE 和 Firefox 上那样位于范围之外。

有人对 Chrome 有解释或解决方法吗？

更新：看来内联元素在 Chrome 中被破坏了。使用 div，但设置 display:inline-block 会发生相同的行为

Answer 1

是的，这在 Chrome 中是不一致的。

我已经解决了这个问题，在末尾添加一个虚拟后缀节点（空格），然后调用setStartAfter插入的后缀节点。可能有更好的方法，但目前看来这可行。

   var sel = window.getSelection();
   var range = document.createRange();
   var suffixNode;

   range.setEndAfter(specialTagContainer);
   range.collapse(false);

   range.insertNode((suffixNode = document.createTextNode(' ')));

   range.setStartAfter(suffixNode);

   sel.removeAllRanges();
   sel.addRange(range);

如果添加空间不是您想要的行为，那么您可以创建一个空的TextNode.