html - 如何使空的 contenteditable 跨度保持高度

Question

我有一个最初为空的可编辑跨度元素。它的高度在空的时候和空的时候不一样，并且不知道如何给它正确的高度。

<b>Foo:</b> <span contenteditable>Bar</span>-<span contenteditable></span>

span[contenteditable]
{
    display: inline-block;
    min-width: 2ch;
    height: 1em;
    padding: 0 .2em;
    outline: 1px solid @text-subtle-color;
}

Answer 1

正如@temani-afif 和@facundo-corradini 所指出的，这个问题似乎只存在于 FireFox 中。通过在查询中进行更多搜索，我找到了 a simple fix这似乎有效，而且在其他浏览器中也不会造成任何困惑:

*[contenteditable]:empty:before
{
    content: "\feff"; /* ZERO WIDTH NO-BREAK SPACE */
}

注意:如果我删除 :empty 选择器，它既不是链接答案的一部分，也不是 the answer of @facundo-corradini 的一部分。在这里，事情又看起来不对劲了。他们额外的 似乎也没有什么不同。