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

Question

我刚刚意识到 jQuery 终端中等宽字体的奇怪行为。

有问题的 css 如下所示：

.terminal .terminal-output > div > div, .cmd div {
    min-height: 14px;
    min-height: calc(var(--size, 1) * 14px);
}
.terminal,
.terminal-output > :not(.raw), 
.terminal-output > :not(.raw) span, 
.terminal-output > :not(.raw) a, 
.cmd, .cmd span {
    font-family: monospace;
    font-family: FreeMono, monospace;
    font-size: 12px;
    line-height: 15px;
}
.terminal,
.terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a, 
.terminal-output > :not(.raw) div,
.cmd, .cmd span, .cmd div {
    font-size: calc(var(--size, 1) * 12px);
    line-height: calc(var(--size, 1) * 14px);
}

HTML 看起来像这样：

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

问题是下划线不可见，因为跨度的高度在 Firefox 中是 15px，但在 Chrome 中是 14px。

火狐/Linux

Chrome/Linux

这是 Firefox 浏览器中的错误吗？什么是正确的行为？有没有办法解决这个问题？或者我是否需要使用 CSS hack 并将字体大小设置为 11px 以修复 Firefox 中的问题，但 ASCII 艺术更小。或者，Firefox 和 Chrome 中的“monospace”字体可能不同。我正在使用等宽字体，因为 Android 上的字体堆栈存在问题（也许他们解决了这个问题，我认为它在 Android 2.3 中是旧项目）。

您可以在此处查看演示 https://codepen.io/jcubic/pen/MbVMwO 它即使在 iframe 之外的调试模式下也能正常工作。

奇怪的是，如果我改变终端的大小

:root {
    --size: 1.4;
}

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

Answer 1

您可以在 css 中添加：line-height: 1;，因为此类属性不需要单位。