Искусство ASCII на Codepen не всегда показывает подчеркивание

Question

В моей библиотеке jQuery Terminal у меня есть проблема с CSS на Codpen (искусство ASCII), когда открытие в Chrome не всегда видно,

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 не уверенное Если это только в 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 или в Chrome вне Codepen (также в режиме отладки вне 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?

Я провел еще одно тестирование, я клонировал редактор кода ручки и вставил страницу отладки в качестве источника iframe, сохранил его и загрузил на свой сервер, и он также работает нормально, div не обрезается, а высота составляет 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>