В моей библиотеке 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 в этой ручке.
EDIT :
У меня также есть этот 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 art line, которая выглядит следующим образом (в компьютерном стиле):
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?
Я провел еще одно тестирование, я клонировал редактор codepen и вставил страницу отладки в качестве источника iframe, сохранил его и загрузил на свой сервер, а такжеработают нормально, div не обрезаются и высота 14px.
EDIT2 :
Я решил проблему, используя:
.terminal .terminal-output > div > div {
min-height: calc(var(--size, 1) * 15px);
}
15px вместо 14px, но все еще хочу знать, почему это происходит и почему только в Codepen / Linux / Chromium.