display:none 的跨度在 firefox 中不显示 space 栏

Question

我们有一个用例，其中一些带有 display:none 的跨度被添加到我们的可编辑内容 div。

因此，当用户以某种方式登陆跨度并尝试添加内容时，space 条将添加到跨度内，因此不会显示在 UI 中。所有其他角色都工作正常。问题仅在于 space.

这似乎是 Firefox 独有的问题。 Chrome 工作正常。

能够使用此 jsfiddle 重现该问题 -> https://jsfiddle.net/senths/ehLp86zy/3/（单击 b/w hello & world 并尝试添加 space）

使用的 Firefox 版本：91.8.0esr（64 位）

这种行为在 Firefox 中是预期的吗？

感谢任何线索。提前致谢。

Answer 1

如果您在 span 标签内设置 contenteditable="true"，这将按照（我相信）您在 Firefox 中的预期方式工作。

Firefox 中有一个 4 年前已知的错误报告。有关信息位于：https://bugzilla.mozilla.org/show_bug.cgi?id=1489481

Answer 2

对其他答案感到困惑，据我所知，这里的解决方案恰恰相反。如果您将 contenteditable="false" 添加到 span，它将阻止 space 被添加到隐藏的 span。

<div id="parent">
  <div contenteditable="true" id="editor2">
    hello<span style="display: none" id="dummy_bkm" contenteditable="false">&nbsp;</span>world
  </div>
</div>

要了解发生了什么，请尝试在下面的代码中插入 space（没有 display: none 并且没有 contenteditable="false"

<div id="parent">
  <div contenteditable="true" id="editor2">
    hello<span style="background: green;" id="dummy_bkm" >&nbsp;</span>world
  </div>
</div>

display:none 的跨度在 firefox 中不显示 space 栏

Spans with display:none is not showing the space bars in firefox

html

css

firefox

contenteditable