html - 在 span 上输入会添加幻影背景颜色样式

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 上触发 bug 的步骤是:

• 拿起鼠标，将光标放在“开始”一词旁边

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

• 选择应完全涵盖以下文本:“END a b c d START”。同样，选择必须从右到左。

• 在键盘上输入一个新字符，例如“X”

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

这个错误特别是 HTML 现在看起来像这样:

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

.foo 类去哪儿了？这个背景色样式从哪儿来的？发生这种情况时，不会触发向 div 或 span 添加 DOM 断点。

Answer 1

我知道这不是真正干净的代码，但如果你用另一个 span 包裹你的 span.foo，问题似乎就解决了。

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