Css 行高和字体大小不一致的问题

我刚刚意识到jQuery终端中单空格字体的奇怪行为

所讨论的css如下所示：

<div class="terminal">
  <div class="terminal-output">
    <div style="width:100%">
      <span data-text="...">
        Foo Bar_____
      </span>
    </div>
  </div>
</div>

.terminal.terminal output>div>div、.cmd div{
最小高度：14px；
最小高度：计算值（变量（--大小，1）*14px）；
}
.候机楼，
.终端输出>：非（.raw），
.终端输出>：非（.raw）范围，
.终端输出>：非（.raw）a，
.cmd、.cmd span{
字体系列：monospace；
字体系列：FreeMono、monospace；
字体大小：12px；
线高：15px；
}
.候机楼，
.终端输出>：非（.raw）范围，
.终端输出>：非（.raw）a，
.终端输出>：非（.raw）div，
.cmd、.cmd span、.cmd div{
字体大小：calc（var（--size，1）*12px）；
线高：计算值（变量（--大小，1）*14px）；
}

HTML如下所示：

<div class="terminal">
  <div class="terminal-output">
    <div style="width:100%">
      <span data-text="...">
        Foo Bar_____
      </span>
    </div>
  </div>
</div>

---

它在两种浏览器中都能正常工作（除了Firefox中字母“e”没有正确呈现，缺少一个下划线，而且我认为下划线仍然较薄，部分被切掉了）。

您只需添加：

行高：1属性不需要单位。
您尝试过“线高：1”吗？@alotropico不，我不知道您可以使用它。它工作得很好。谢谢你可以加上这个作为答案。它工作得很完美，高度仍然是14px和跨度15px（在Firefox中），但没有截断。也许这就是Firefox中的bug。