`ie9` – 当父进行编辑时，contenteditable false无法正常工作

我正在尝试制作内容可编辑且不可编辑的容器。 用户可以将此作为3种方式使用。

1. 他们可以将内容与non-editable内容放在一起

2. 他们可以将内容与editable

3. 他们可以在不选择其中一个的情况下放置内容。 （编辑）

我试图实现如下：

 #content{ border:1px solid red; height:100px; } .subContentNotEdit{ background:#87a476; } .subContentEdit{ background:#ffd5d5; } 

 
 
Editable
 
Not editable
 Enter text here..  

问题：在ie9仍然可以编辑subContentNotEdit div。 （我发现，因为它的父级具有可编辑的真实性！）

它适用于chrome和firefox但不适用于ie9 。 因为我的客户需要ie9这个选项，我需要找到一个解决方案。

有人可以帮帮我吗？

Answer 1

在IE中它实际上是在工作，“假”标志被尊重，但如果你双击它，它进入editmode（可能是因为双击事件冒泡到父？）。

我的建议是将你的不可编辑内容放在::after元素中（因为没有浏览器会在其中找到插入符号位置以允许它被编辑），如下所示：

 #content{ border:1px solid black; height:100px; } .subContentEdit{ background:#87a476; } .subContentEdit::after { content:'Not editable'; display:block; background:#ffd5d5; } 

 
 
Editable
 Enter text here..