HTML5 - contenteditable="false" 嵌套在 contenteditable="true"

Question

我在父 contenteditable="true" 中嵌套 contenteditable="false" 元素有非常不同的行为：

  <pre>
  <div contenteditable="true">
    <span>I'm supposed to be editable</span>
    <p contenteditable="false">I'm NOT supposed to be editable.<br>Neither should I.</p>
    <span contenteditable="false">I'm NOT supposed to be editable.</span>
  </div>
  </pre>

这个小提琴举例说明了两个不应编辑的元素实际上是如何使用 Internet Explorer 11 而不是 Google Chrome 编辑的。是什么赋予了？

我看到有些人通过将它们设置为“true”来应用一种奇怪的解决方法，这确实适用于 IE，但对 Google Chrome 有相反的效果（应该如此）。

这个类似问题的答案是 2013 年的。三年后，这仍然是当前的情况吗？

编辑： 这个小提琴几乎达到了想要的结果。但是，如果您将光标设置为“不要移动..”并将其向左移动直到到达不可编辑的跨度，您将获得焦点并能够对其进行编辑。有什么想法可以避免这种行为吗？

受影响的浏览器：Internet Explorer 11

Answer 1

这是 Internet Explorer 11 中的一个错误。HTML5 规范的第7.6.1节指出：

该contenteditable属性是一个枚举属性，其关键字为空字符串true、 和false。空字符串和true关键字映射到真实状态。该false关键字映射到错误的状态。此外，还有第三种状态，继承状态，它是缺失值默认值（和无效值默认值）。

在真实的状态表明元素可编辑。在继承状态表明该元素是可编辑的，如果它的父。该错误状态表示该元素是不可编辑的。

这意味着contenteditable=false元素中的contenteditable=true元素不应该是可编辑的。

此外，contenteditable=true元素中的contenteditable=true元素应该具有可编辑的内容。这意味着您链接的问题的答案实际上是无效的（尽管发布时可能就是这种情况）。