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>

This fiddle举例说明了两个不应编辑的元素实际上如何可以使用 Internet Explorer 11 而不是 Google Chrome 进行编辑。给了什么？

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

这个类似question的答案日期是 2013 年。三年后，这仍然是现在的情况吗？

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

受影响的浏览器:Internet Explorer 11

Answer 1

这是 Internet Explorer 11 中的错误。7.6.1 of the HTML5 specification 部分状态:

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.

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

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