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元素出現莫名其妙

回答

相關問題