「詳細を隠す」要素の表示問題

[Canapin (Coin-coin le Canapin)]

このブロックでは、

[details="Summary"]
This text will be hidden
[/details]

display: block をすべての子要素または兄弟要素に適用する CSS ルールが 2 つあります。

details[open] > *, details[open] .lightbox-wrapper {
    display: block;
}

details[open] > summary:first-of-type ~ *,
details.open > summary:first-of-type ~ * {
    display: block;
}

これは、インライン表示されるべき各要素がブロックとして表示され、すべての幅を占有してしまうため問題となります。たとえば、span やリンクなどです。これらのルールの目的は何でしょうか？

例：

[details="Hidden"]
Enhanced image and comparison with the same halo on Earth:
![66bb711c57dd10e4e4f9713ebeec0ccec9a8d0dc1|220x499](upload://eEOifbxarMIErU6OnozO45BJq0I.jpeg)
![541efc040f313220531d74677a9105e44890c29c1|442x500](upload://c0ausOGkNA0BJMAsmAnOqmpWBv6.jpeg)
Though Mars's atmosphere is composed of 95% of carbon dioxide (CO<sub>2</sub>), the halo was produced by water (H<sub>2</sub>O) ice crystal, hence the similarity with the common Earth 22° [halo](https://en.wikipedia.org/wiki/22%C2%B0_halo?oldformat=true). It's exactly the same, in fact.
[/details]

↓

Hidden

Enhanced image and comparison with the same halo on Earth:

Though Mars’s atmosphere is composed of 95% of carbon dioxide (CO₂), the halo was produced by water (H₂O) ice crystal, hence the similarity with the common Earth 22° halo. It’s exactly the same, in fact.

---

ここに3つのインライン要素があります：<sub>とリンクです。

---

---

セーフモードを有効にし、カスタムプラグインがインストールされていなくてもすべてのプラグインを無効にすると、問題は解消されます。

---

---

try.discourse.org からのビデオ例：

[JammyDodger]

こんにちは、@Canapinさん

私の理解が正しければ、これはMarkdownとHTMLの混在が原因だと思います。画像と写真の間に空行を入れると、意図したとおりに表示されるはずです。

非表示

強化された画像と、地球で見られるのと同じハロとの比較：

火星の大気は二酸化炭素（CO₂）で95%を占めていますが、このハロは水（H₂O）の氷晶によって生成されたため、地球で一般的な22°のハロと似ています。実際、全く同じものです。

@Canapin

カスタムプラグインがインストールされていなくても、セーフモードを有効にしてすべてのプラグインを無効にすると、問題は解消されます。

detailsタグはプラグインとしてカウントされるため、セーフモードで公式プラグインを無効にすると、それらがオフになると思います。

[Canapin (Coin-coin le Canapin)]

ああ、なるほど。改行を入れなかったため、後続のテキストコンテンツが <p> タグで囲まれなかったのですね。

書く際に修正するのは簡単です。将来的に修正されなくても、これで十分です。他の人を混乱させる可能性はあると思いますが（他の報告は見かけなかったので…）。

また、プレビューはうまく機能しますが、最終的な投稿はそうではないことに注意してください。

---

また、Hide Details コンテナ内のすべての直接の子要素/兄弟要素がブロック要素になる CSS ルールの理由についても興味があります。

[JammyDodger]

@Canapin

I also would be interested in the reasoning behind the CSS rules that make every direct child/sibling block inside the Hide Details block.

I’m afraid this I do not know. But I’ll pull it out as a quote to give it a little bump in case it got overlooked previously, and hopefully someone else in the community knows more.