Codepen 上的 ASCII 艺术并不总是显示下划线

Question

在我的图书馆 jQuery 终端中，当在 Chrome 中打开时，我在 Codpen（ASCII 艺术）上遇到 CSS 问题下划线并不总是可见，

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;
}

这是 codepen https://codepen.io/jcubic/pen/wQjaZv 不确定如果这只是在 Linux 没有在 MacOSX 或 Windows.

上测试过

我可以通过将 padding-bottom: 1px; 或 margin-bottom: 1px 添加到 .terminal-output > div > div 来解决这个问题，但我想知道为什么会这样？为什么第二行有下划线但第一行没有？

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

编辑:

我也有这个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;
}

在 Firefox 中或在 Codepen 之外的 Chrome 中（也在 Codpen iFrame 之外的调试模式中）我有：

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

当我将鼠标悬停在 div 线上时，我得到了 15 的高度。

所以下划线在 div 之外，但我有这个 css:

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

它至少应该是 14px，为什么它有 13.9915px？

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

EDIT2:

我已经通过使用解决了这个问题：

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

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

Answer 1

.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) * 20px);
  line-height: calc(var(--size, 1) * 24px);
}

下划线被截掉了，因为达到了行高的限制，每行都有背景色。如果你也增加行高，它会再次起作用

这里是一个简化的例子：

p {
  white-space: pre;
  font-family: monospace;
}
#one {
  font-size: 14px;
  line-height: 7px;
}

#two {
  font-size: 14px;
  line-height: 8px;
}

span {
  background: white;
  
}

<p id="one">
  <span>      __ _____                     ________                              __</span><br>
  <span>     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /</span><br>
  <span> __ / // // // // // _  // _// // / / // _  // _//     // //  \/ // _ \/ /</span><br>
  <span>/  / // // // // // ___// / / // / / // ___// / / / / // // /\  // // / /__</span><br>
  <span>\___//____ \___//____//_/ _\_  / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/</span><br>
  <span>          \/              /____/                                  v. 2.0.1</span>
</p>
<p id="two">
  <span>      __ _____                     ________                              __</span><br>
  <span>     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /</span><br>
  <span> __ / // // // // // _  // _// // / / // _  // _//     // //  \/ // _ \/ /</span><br>
  <span>/  / // // // // // ___// / / // / / // ___// / / / / // // /\  // // / /__</span><br>
  <span>\___//____ \___//____//_/ _\_  / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/</span><br>
  <span>          \/              /____/                                  v. 2.0.1</span>
</p>

Codepen 上的 ASCII 艺术并不总是显示下划线

ASCII art on Codepen don't always show underscores

css

ascii-art

jquery-terminal

codepen