contenteditable = false in contenteditable = true

Question

问题：

我观察到Chrome和Opera中出现不良行为，当加入两个p时会发生这种行为 通过删除它们之间的分隔来标记。 Chrome和Opera删除contenteditable = false元素（小部件）和文本。

示例：

example on jsfiddle

HTML：

<div contenteditable="true" class="editor">
<p>This is the first paragraph.</p>
<p>&larr;Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> 
</div>

的CSS：

.widget{
    display: inline-block;
    padding: 5px;
    background-color: gray;
}

.editor{
    font: 20px Trebuchet MS
}

问题：

为什么呢？如何解决？

Answer 1

我很久以前为Blink和Webkit报告了此错误。这有点关键，没有解决方法。 Webkit团队试图修复它，但据我所知，他们引入了新的bug; |。

PS。是的，这个答案没有提出任何修复，但唯一的解决方法是覆盖 delete 和 backspace 键的行为。