如何使空的满足跨度保持高度

Question

我有一个可编辑的span元素，它最初是空的。它的高度在空的时候变化，而在它没有的时候变化，并且无法弄清楚如何使它达到正确的高度。

<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，那么事情就会再次出现。他们额外的似乎也没有什么区别。

Answer 2

您可以使用 Flexbox 执行此操作：

.flex-container {
  display: inline-flex; /* takes only the content's width */
  /*align-items: stretch; by default / takes care of the equal height among all flex-items (children) */
}

.flex-container > * {
  margin: 0 5px; /* just for demonstration */
}

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

<div class="flex-container">
  <b>Foo:</b> <span contenteditable>Bar</span>-<span contenteditable></span>
</div>
<div class="flex-container">
  <b>Foo:</b> <span contenteditable>Bar</span>-<span contenteditable>123</span>
</div>

Answer 3

这是一个在Firefox上专门编辑空内容的问题。

解决方法是设置一个包含零宽度不间断空间“字符”的伪元素，如下所示：

span[contenteditable]
{
    display: inline-block;
    min-width: 2ch;
    height: 1em;
    padding: 0 .2em;
    outline: 1px solid grey;
    box-sizing:border-box;
  content="";
}

span[contenteditable]:before {
    content: "\feff ";
}

<b>Foo:</b> <span contenteditable>Bar</span>-<span contenteditable placeholder=""> </span>