键入跨度可添加幻影背景颜色样式

Question

JSFiddle：http://jsfiddle.net/p7ph5vfj/

我的问题是：有人可以建议解决这个特定于Chrome的错误吗？我的问题不是字母X突出显示，而是它失去了.foo类，所以我再也找不到它了。如果背景颜色消失，我会很好地保持.foo类保持不变。我甚至不知道如何调试这个，因为当发生这种情况时，DOM断点不会被触发。

<div contenteditable="true">
    DO NOT REPLACE. <span class="foo">END a b c</span> d START la la
</div>

，CSS看起来像这样：

.foo {
    background-color: #ff0000;
}

触发Chrome错误的步骤是：

• 拿起鼠标，将光标放在单词START

旁边

• 单击并按住以选择文本，转到左侧并在单词END处完成选择。

• 选择应完全涵盖以下文字：＆＃34; END a b c d START＆＃34;。同样，选择必须是从右到左。

• 在键盘上输入新字符，例如＆＃39; X＆＃39;

• 如果X以红色突出显示，则表示您已触发错误。

特别是错误的是HTML现在看起来像这样：

<div contenteditable="true">
    DO NOT REPLACE. <span style="background-color: rgb(255, 0, 0);">X</span>&nbsp;la la
</div>

.foo课程在哪里，这种背景颜色风格来自哪里？当发生这种情况时，不会将div断点添加到div或span中。

Answer 1

我知道这不是真正干净的代码，但是如果你用另一个跨度包装你的span.foo，问题似乎是固定的。

<div contenteditable="true"> DO NOT REPLACE. <span><span class="foo">END a b c</span></span> d START la la </div>