在 span 上键入会添加幻影背景颜色样式答案

【问题标题】：Typing over span adds phantom background-color style在 span 上键入会添加幻影背景颜色样式
【发布时间】：2015-06-09 05:00:28
【问题描述】：

我的问题是：任何人都可以建议解决此 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的步骤是：

特别的错误是 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 断点。

【问题讨论】：

非常好的问题。我很想知道那里发生了什么。
有趣的是，它从类中获取背景颜色并将其放置在样式中。更有趣的是，如果该类具有color 属性，则跨度将被剥离其类并包装在带有颜色属性的<font> 标记中！！！ Here is an example of that
是的，如果你有.foo {display:block}，它会在跨度中添加一个额外的<br>。如果您有.foo {display:inline-block}，则跨度将完全消失。可爱的东西。虽然没有解决方案；我用id 和role 进行了测试，但是这些属性也消失了。
经过一番研究，我发现这份文件似乎应该指定这些行为：dvcs.w3.org/hg/editing/raw-file/tip/editing.html 虽然我没有时间阅读它，所以我不知道是否有任何线索它。作为解决方法，为什么不直接用 javascript 覆盖该行为？
我的意思是检测对内容所做的任何类型的更改，如果更改会触发错误阻止委派，然后动态进行修改（实际上是按需重写编辑 API）。虽然我不得不承认，对于这样一个看似可以忽略不计的问题，这可能是一个很大的过度，而且重新考虑应用程序的工作方式或等待这个错误得到解决（如果它会解决的话）会更容易。

【解决方案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>

【讨论】：