在我的库 jQuery 终端中，当在 Chrome 中打开时，Codpen 上的 CSS（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;
}
这是 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 源，保存并上传到我的服务器，它也可以正常工作，div 没有被切断，高度为 14px。
编辑2：
我已经通过使用解决了这个问题：
.terminal .terminal-output > div > div {
min-height: calc(var(--size, 1) * 15px);
}
15px而不是14px但仍然想知道为什么会发生这种情况以及为什么只在 Codepen/Linux/Chromium 上。