1

私のライブラリ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;
}

ここにコードペンがあります https://codepen.io/jcubic/pen/wQjaZv不明 これが Linux のみの場合、MacOSX または Windows ではテストしていません。

padding-bottom: 1px;またはmargin-bottom: 1pxを追加することで問題を解決できますが、.terminal-output > div > divなぜこれが起こっているのか知りたいですか? 2 行目にはアンダースコアが表示されているのに、最初の行にはアンダースコアが表示されないのはなぜですか?

このペンでは、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ですか?

もう1つテストを行いました.codepenエディターを複製し、デバッグページをiframeソースとして挿入し、保存してサーバーにアップロードしましたが、正常に動作し、divは切り取られず、高さは14pxです.

EDIT2：

以下を使用して問題を解決しました。

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

15px代わりに14px、なぜこれが起こっているのか、なぜCodepen / Linux / Chromiumだけで起こっているのかを知りたい.

4

1 に答える 1