Internet explorer div contentEditable prevent DOM element selection onclick

I'm trying to update the innerHTML of a <div contentEditable=true> programmaticaly (javascript).

Using Internet Explorer < 8 or in Quirks mode if the HTML contains <span> tags one cannot not click to set the caret position, or navigate from char to char using keyboard. Instead the <span> is selected (oncli开发者_如何学Pythonck) and can be moved/resized, or the caret jumps to the beginning/end of the <span> (keyboard arrows).

Screenshot:

http://i54.tinypic.com/343p75y.png

Do you know how to prevent this kind of selection? Note that with Internet Explorer 8 in standard mode (or any other browser) I don't have this behavior.

---

This happens with any element that has layout. Make sure that none of the CSS properties that trigger layout are applied to your span and the problem will go away.