DOM元素出现莫名其妙

我在Web应用程序中遇到了一个奇怪的错误我一直在努力，我已经能够在Chrome和Safari中重现，但不能在Firefox中重现。DOM元素出现莫名其妙

要查看该错误，请访问www.lastcalc.com并键入一个大写字母。该字符将立即通过DIV.question（contentEditable设置为true的DIV）上的“keydown”事件的侦听器以白色“按钮”css突出显示。这由locutus.js中的highlightSyntax函数执行，并依靠Rangy库在高亮过程中跟踪光标位置。

到目前为止好，但现在命中删除。突然在Safari出现以下结构，与光标在中间br元素（在视觉上的文本居中并获取颜色＃606060）：

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

在铬它是稍有不同：

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

据我所知，我的代码中没有任何内容正在创建任何这些元素，但它们都出现了。在我的代码中提到的＃606060颜色的唯一位置是在“white”类的定义中的highlighting.css中，该类是分配给“span”元素的类，当我点击退格键时该元素将被删除。

看起来好像有某种浏览器巫毒在这里发生了某种程度的错误 - 任何人都可以对此有所了解吗？

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

编辑：经过一些谷歌搜索似乎这可能是一个bug in webkit，所以现在的问题是：我怎么能解决它呢？

来源

2012-01-26 sanity

您是否禁用了可能正在运行的任何扩展程序，如AdBlock等？ –

我可以确认它没有AdBlock。我确实在Chrome中运行了各种扩展，但Safari中没有。 – sanity

在Chrome开发者控制台的“元素”标签中，您可以右键单击一个DOM元素并选择“子树修改中断”。这会在将代码添加到文本框中的代码中放置一个断点，以便您可以看到正在执行的操作。我不知道rangy-core.js做了什么，它被缩小了，这没有帮助。 – Jivings

我发现了下面的解决方法，基本上涉及到使用JQuery删除违规的div和跨度，同时确保不要删除Rangy用来跟踪光标位置的跨度，我每次都会这样做在编辑DIV keyUp事件：

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

它解决我的问题，但似乎实际的错误是在WebKit的。

来源

2012-01-26 13:59:32 sanity

DOM元素出现莫名其妙

回答

相关问题