contenteditable = false contenteditable = true块在IE8中仍然可以编辑

Question

我有以下HTML打算确保内部span不可编辑.这适用于其他浏览器,但不适用于IE8.

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

这是一个JSFiddle来说明这一点(使用IE8来测试它):http://jsfiddle.net/haxhia/uUKPA/3/.

我如何确保IE8也能正确处理？

Answer 1

好吧,我已经发现了答案,就像发现了青霉素一样.

你看,这个代码玩弄,我错误地设置contenteditable到true了span,瞧!有效!

因此,要span在一个可信的div中创建一个非满足的,你只需将其contenteditable属性设置为true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

这是要演示的文件(使用IE8打开它):https://codepen.io/hgezim/pen/qMppLg.

最后,我没有发布问题来获得投票(虽然,他们不会受伤!),但由于解决方案太荒谬了,我没有在这里找到它,我认为有人可能会发现节省时间.

Answer 2

在IE上contenteditable ="true"内部contenteditable ="true"(使其不可编辑)的问题是双击内部元素使其可编辑

解

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

子标记的内容无法编辑

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

JSFiddle示例