Javascript DOM元素以令人费解的方式出现

我在一个我一直在开发的web应用程序中遇到了一个奇怪的bug，我可以在Chrome和Safari中重现它，但不能在Firefox中重现

要查看错误，请访问并键入单个大写字符。通过DIV.question（contentEditable设置为true的DIV）上的“keydown”事件的侦听器，该角色将立即通过白色“button”css高亮显示。这是由Loctus.js中的highlightSyntax函数执行的，并依赖Rangy库在高亮显示期间跟踪光标位置

到目前为止还不错，但现在点击删除。在Safari中突然出现以下结构，其中光标位于中间的BR元素（视觉上文本为中心并得到颜色α606060）：

在Chrome中，它略有不同：

<div style="text-align: center;">
    <font color="#606060">
        <span style="font-size: 14px;">
            <br/>
        </span>
    </font>
</div>

就我所知，我的代码中没有创建任何这些元素，但它们仍然出现。在我的代码中，唯一提到#606060颜色的地方是“white”类定义中的highlighting.css，它是分配给“span”元素的类，当我点击backspace时，该元素会被删除

这里似乎有某种浏览器巫术正在进行，但不知怎么出了问题——有人能解释一下吗

如果有人想知道这个网站是什么，你可以找到更多

---

编辑：在谷歌搜索之后，这似乎是一个问题，所以现在的问题是：我如何解决它？

我找到了以下解决方法，基本上包括使用JQuery删除有问题的div和span，同时确保不删除Rangy用来跟踪光标位置的span，每次可编辑div上出现keyup事件时，我都会执行此操作：

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

---

它解决了我的问题，但实际的bug似乎在WebKit中。

我找到了以下解决方法，基本上包括使用JQuery删除有问题的div和span，同时确保不删除Rangy用来跟踪光标位置的span，每次可编辑div上出现keyup事件时，我都会执行此操作：

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

---

它解决了我的问题，但实际的错误似乎出现在WebKit中。

您是否禁用了您可能正在运行的任何扩展，如AdBlock等？我可以确认它在没有AdBlock的情况下发生。我确实在Chrome中运行了多种扩展，但在Safari中没有。在Chrome开发者控制台的“元素”选项卡中，您可以右键单击DOM元素，然后选择“在子树修改时中断代码”。这将在代码中放置一个断点，将元素添加到文本框中，这样您就可以看到它在做什么。我不知道rangy-core.js是做什么的，它被缩小了，这没有帮助。@Jivings，我做了一些断点，看起来这些孤立元素出现在highlightSyntax（）之前方法被调用-所以我不认为Rangy是罪魁祸首。我觉得WebKit voodoo肯定出了问题。您是否禁用了您可能正在运行的任何扩展，如AdBlock等？我可以确认它在没有AdBlock的情况下发生。我确实在Chrome中运行了多种扩展，但在Safari中没有。在Chrome开发者控制台的“元素”选项卡中，您可以右键单击DOM元素，然后选择“在子树修改时中断代码”。这将在代码中放置一个断点，将元素添加到文本框中，这样您就可以看到它在做什么。我不知道rangy-core.js是做什么的，它被缩小了，这没有帮助。@Jivings，我做了一些断点，看起来这些孤立元素在调用highlightSyntax（）方法之前出现了-所以我不认为rangy是罪魁祸首。这看起来绝对像WebKit voodoo在我看来出错了。