在可编辑Div，浏览器兼容性问题中插入不可修改的内容

Question

我正在尝试将一些不可编辑的内容放在html页面上的可编辑div中。 以下工作方式完全符合我在FireFox中的需要，但Internet Explorer表现得很糟糕：

<div id="EditableDiv" contenteditable="true" style="height:100px;width:500px;font-family:Consolas;letter-spacing:1px;padding:5px;color:white;background-color:black;">
  0.5 * <span contenteditable="false" unselectable="on">{NonEditableText}</span> / 100
</div>

我在Firefox和Internet Explorer中的行为有以下三个问题：

1. 点击不可修改的内容。它突出了Firefox中预期的整个范围，但在Internet Explorer中没有。

2. 删除div内容非常不稳定：

   要测试此项，请将光标放在文本的开头，然后逐个字符地从左到右开始删除。

   请注意，在Firefox中它按预期工作。不可编辑的范围一次全部删除（如单个字符）。

   在Internet Explorer中有两个问题：

   • 插入随机空格。
   • 不可编辑的内容会逐个字符地删除，而不是整个元素。