contenteditable and Internet Explorer - problem with hasLayout

I have html like
 

<p>

 <span style="display: inline-block; width: 50px;">Text:</span>

 <span style="display: inline-block;">Other text<br /> second line</span>

<p>

The problem is in IE - I should double-click on each <span> to start typing in it.

Something like this image:

I did a research and figured out that this is the problem in IE with contenteditable="true" and these css-properties, which set hasLayout="true". More information here in http://stackoverflow.com/questions/3603050/remove-resize-handles-and-border-from-elements-with-contenteditable and http://www.satzansatz.de/cssd/onhavinglayout.html.

I tried the next code (to disable resizing), but I don't want to see the "resize border":

function fixIE( editableContainer ) {
    editableContainer.onmousedown = function ( e ) {
        e = e || event;
        ( e.target || e.srcElement ).focus( );
    };
    editableContainer.onresizestart = function ( e ) {
        e = e || event;
        if ( e.stopPropagation ) {
            e.stopPropagation( );
        }
        e.cancelBubble = true;
        if ( e.preventDefault ) {
            e.preventDefault( );
        }
        e.returnValue = false;
        return false;
    };
}

Can you help me?

Thanks!