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

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处完成选择.

• 选择应完全涵盖以下文本:"END abcd START".同样,选择必须是从右到左.

• 在键盘上键入一个新字符,例如'X'

• 如果X以红色突出显示,则表示您已触发该错误.

这个bug特别是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>