代码笔上的ASCII艺术并不总是显示下划线

Codepen使用iframe,我已经在本地进行了测试,iframe看起来还可以。Codpen在FireFox中看起来也不错。如果打开Codpen调试模式,它看起来也正常。

从开发人员工具复制的CSS(除了 ::selection

.terminal .terminal-output div span {
    display: inline-block;
}
.terminal .terminal-output > div:not(.raw) div {
    white-space: nowrap;
}
.terminal .terminal-output > div > div {
    min-height: calc(var(--size, 1) * 14px);
}
.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);
}
.terminal, .terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a,
.terminal-output > :not(.raw) div, 
.cmd, .cmd span, .cmd div {
    color: var(--color, #aaa);
    background-color: var(--background, #000);
}
.terminal, .terminal-output > :not(.raw) span, 
.terminal-output > :not(.raw) a, 
.terminal-output > :not(.raw) div, 
.cmd, .cmd span, .cmd div {
    font-family: monospace;
    color: #aaa;
    background-color: #000;
    font-size: 12px;
    line-height: 14px;
}
.terminal .terminal-output > div:not(.raw) div {
    white-space: nowrap;
}
Style Attribute {
    --char-width: 7.23011;
}
.terminal, .cmd {
    box-sizing: border-box;
    cursor: text;
}

这是密码笔 https://codepen.io/jcubic/pen/wQjaZv

我可以通过添加 padding-bottom: 1px; 或 margin-bottom: 1px .terminal-output > div > div 但我想知道为什么会这样?为什么第二行的下划线可见,而第一行的下划线不可见?

我没有在这支笔中使用任何重置或规范化css。

编辑 :

/* FireFox hack */
@supports (-moz-animation: foo) {
    .terminal,
    .terminal .terminal-output > :not(.raw) span,
    .terminal .terminal-output > :not(.raw) a,
    .terminal .terminal-output > :not(.raw) div,
    .cmd,
    .cmd span,
    .cmd div {
        line-height: calc(var(--size, 1) * 13px);
    }
}

这可能会解决firefox的一些问题,但如果没有它,它似乎可以工作。

当我在Chrome/Linux/Codpen的开发工具中进行调查时,我发现ASCII艺术线条如下(以计算方式):

line div parent {
   height: 13.9915px;
}
span child {
   height: 13.6364px;
}

line div parent {
   height: 14px;
}
span child {
   height: 14px;
}

当我悬停在line div上时,我的高度是15。

.terminal .terminal-output > div > div {
    min-height: calc(var(--size, 1) * 14px);
}

它至少应该是14px,为什么它有 13.9915px ?

我又做了一次测试,我克隆了codepen编辑器,插入调试页面作为iframe源,保存并上传到我的服务器,它也工作正常,div没有被切断,高度为14px。

:

.terminal .terminal-output > div > div {
    min-height: calc(var(--size, 1) * 15px);
}

15px 而不是 14px 但仍然想知道为什么会发生这种情况,为什么只在Codepen/Linux/Chromium上发生。