child 元素的令人满意的奇怪行为，并且不独立于空格？

Question

我一直在研究 contenteditable 个字段，遇到了一个我无法理解的奇怪行为。

查看 fiddle 以了解这个特定问题。

我有两个相同的 contenteditable div。它们都有相同的 <span> child，后跟一个空白字符（否则胡萝卜问题随之而来）。两者之间的唯一区别是第二个 div 已变为 "prettified"，并且通过在新行上缩进 <span> 使其更具可读性。

<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contenteditable="false">Something something</span>&#8203;</div>


<div contenteditable="true">
  <span class="lead" contenteditable="false">Something something</span>&#8203;
</div>

在 div 中尝试此操作...

将胡萝卜放在内容的right-end处（即在空白字符之后）
然后按退格键几次

您会注意到在顶部（第一个）contenteditable div，您可以删除 <span> 元素，就好像它是一个巨大的字符一样。您还应该注意到，在第二个 div 中，再多的退格也无法将其清除。至少在 Safari 中不会。

那是什么给了！？我认为 HTML 是独立于空格的——为什么两者的行为不同？

查看源代码，它们有略微不同的标记...

...但我仍然明白为什么会有任何不同。

我希望它是可删除的，所以解决方案显然只是使用以前的版本，但仍然很好奇为什么这个问题存在。

还有！如果您碰巧是 contenteditable 大师，我一直在与另一个问题作斗争 over here。欢迎在这方面提供任何帮助！

Answer 1

HTML不是白-space独立的；相反，多个 white-space 字符被认为与一个 space 符号相同。这里的问题不是关于contenteditable，而是关于美化这里实际的变化DOM。查看 this fiddle，它说明了问题。 HTML:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

<div style="clear: both;"></div>

<div class="left"></div><div class="center"></div><div class="right"></div>

CSS:

.left, .right { width: 25%; }
.center { width: 50%; }
.left, .right, .center { display: inline-block; height: 1em; }
.left { background-color: red; }
.center { background-color: green; }
.right { background-color: blue; }

如您所见，一个换行符（等于一个 space）在块之间形成一些 space，而当根本没有白色 space 时，一切正常 "as expected".

不过，我不得不承认，行为很奇怪：当 DOM 检查器打开时，它会显示我（在 Chrome）

（此处为zero width space character），如果我将光标放在末尾并返回space一次，得到相同的DOM元素（好吧，我试过删除边距作为嗯）：

但是，在第二种情况下，backpace 没有按预期工作。删除不可编辑范围的唯一方法是在其后添加一个字符，然后将光标移动到其前并删除。这可能是一个错误，尽管它存在于 Safari（如您所说）和 Chrome（根据我的测试）中。

我认为这将与浏览器供应商的支持进一步讨论。顺便说一下，在 FireFox 中，这表现得非常一致：在这两种情况下 span 都不能被删除，并且在第一个中，它后面没有任何内容，而在第二个中，space 在 span（当然可以删除）

child 元素的令人满意的奇怪行为，并且不独立于空格？

Contenteditable, bizarre behaviour of child elements, and NOT whitespace independent?

html

contenteditable