`ie9` - Contenteditable False Not Working When Parent Editable

I am trying to make a content editable and non-editable containers. the user can use this as 3 ways. they can put content with non-editable they can put the content with editable

Solution 1:

In IE it actually is working that the "false" flag is respected, but if you double-click on it, it goes into editmode (possibly because the double-click event bubbles up to the parent?).

My suggestion would be to put your non-editable content in an ::after element (since no browser will find a caret position inside it to allow it to be edited) like so:

#content{
    border:1px solid black;
    height:100px;
}

.subContentEdit{
    background:#87a476;
}

.subContentEdit::after {
    content:'Not editable';
    display:block;
    background:#ffd5d5;
}

<divid="content"contenteditable="true"><divclass="subContentEdit">Editable</div>
    Enter text here..
</div>