IE＆lt; = 10：我可以在contenteditable = false元素中输入字符

Question

这是我的DOM结构：

＆＃13;

＆＃13;

<div contentediatble="true">
  <span contenteditable="false" class="my-block">
    <span contenteditable="false">My Block</span>
    <i contenteditable="false" class="icon-remove">X</i>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13; 根<div>看起来像一个文本框：

在IE 9和10中，当我点击根<div>时，假设我的插入符号位于<span class="my-block">元素后面，当我输入时，单词应该在整个块之后。

但实际上，当我开始输入时，字符实际上位于<span class="my-block">元素（而不是AFTER）中，后面是<i contenteditable="false" class="icon-remove">X</i>，我甚至可以删除<span class="my-block">的内容通过使用退格（但不删除整个范围）

这太烦人了，而且很难解决。 IE确实给开发者带来了很多麻烦:(

但是，预期结果在FF，Chrome和IE11中效果很好。