在Firefox中全选（ctrl + a）和document.execCommand问题

Question

I have a ribbon element of which text is editable. It works fine, until you press ctrl + a or triple click inside to select all text in Firefox. document.execCommand won't work in Firefox with [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: debugger eval code :: <TOP_LEVEL> :: line 1" data: no] error in console.

To reproduce the problem, run the below code, select the entire text within element (by clicking the text and pressing ctrl + a) and in browser console run document.execCommand('italic'); .

  <div style="position: absolute; top: 89px; left: 41px; z-index: 6;"> <font contenteditable="true" style=" float: left; background: #a64ba5; vertical-align: top; color: #fff; font-weight: bold; font-size: 12px; padding-left:10px; padding-top:14px; padding-bottom:14px; ">Some text</font> <span class="right" style=" position: absolute; content: ''; border: 20px solid #a64ba5; border-left-width: 10px; border-right-color: transparent;"></span> </div> 

Does anybody have any idea/fix to this problem?

Answer 1

I resolved the problem using div tag instead of font. This fixed the problem in Firefox, it seems to be Firefox bug. Another option would be to put contenteditable attribute to parent element, but this break the element when you use ctrl + a and backspace.