# “隐藏详情”元素中的显示问题
**URL:** https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626
**Category:** UX
**Tags:** hide-details
**Created:** [2022年五月20日 16:19 UTC](https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626 "2022-05-20T16:19:20Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月20日 16:19 UTC](https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626/1 "2022-05-20T16:19:20Z")
在此块中，
```plaintext
[details="Summary"]
This text will be hidden
[/details]
```
有两个 CSS 规则会使每个子元素或同级元素显示为 `display: block`：
```scss
details[open] > *, details[open] .lightbox-wrapper {
display: block;
}
```
```scss
details[open] > summary:first-of-type ~ *,
details.open > summary:first-of-type ~ * {
display: block;
}
```
这是一个问题，因为每个本应内联显示的元素都会显示为块级元素，占据所有宽度。例如 span 或链接。这些规则的目的是什么？ 🤔
示例：
```xml
[details="Hidden"]
Enhanced image and comparison with the same halo on Earth:
Though Mars's atmosphere is composed of 95% of carbon dioxide (CO2), the halo was produced by water (H2O) 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 (CO2), the halo was produced by water (H2O) 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.
* * *
这里有 3 个内联元素：`` 和一个链接：
* * *
* * *
如果我们启用安全模式并禁用所有插件，即使我们没有安装自定义插件，问题也会消失：
* * *
* * *
[try.discourse.org](http://try.discourse.org) 的视频示例：
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022年五月23日 09:22 UTC](https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626/2 "2022-05-23T09:22:03Z")
您好 @Canapin 🙂
我想（如果我理解正确的话）这是因为 Markdown 和 HTML 混用的问题。如果您在图片和文字之间留一个空行，它应该会按您预期的方式显示：
> **隐藏**
>
> 增强的图像以及与地球上相同光晕的比较：
>
> 
> 
>
> 尽管火星大气层由 95% 的二氧化碳 (CO₂\<0xE5\>\<0xAD\>\<0x90\>) 组成，但该光晕是由水 (H₂\<0xE5\>\<0xAD\>\<0x90\>) 冰晶产生的，因此与地球上常见的 22° [光晕](https://en.wikipedia.org/wiki/22%C2%B0_halo?oldformat=true) 相似。事实上，它们完全相同。
> [@Canapin](#):
>
> 如果我们启用 [安全模式](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504) 并禁用所有插件，即使我们没有安装自定义插件，该问题也会消失：
我相信 details 被算作一个插件，所以如果您在安全模式下禁用官方插件，它们就会被关闭。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月23日 12:49 UTC](https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626/3 "2022-05-23T12:49:52Z")
啊，我明白了。因为我没有添加换行符，所以后面的文本内容没有被`\u003cp\u003e`包裹。\n\n写的时候很容易修复。如果将来不修复这个问题，对我来说也够用了，不过我猜这有时可能会让其他人感到困惑（但我没看到其他报告，所以……）。\n\n另外，请注意预览效果很好，但最终发布的效果却不是。\n\n
\n\n—\n\n我还想知道让“隐藏详情”容器内的每个直接子元素/同级元素都成为块级元素的 CSS 规则背后的原因。
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022年六月20日 12:13 UTC](https://meta.discourse.org/t/display-issue-in-the-hide-details-element/227626/4 "2022-06-20T12:13:46Z")
> [@Canapin](#):
>
> 我也想知道让“隐藏详情”块内的每个直接子/同级块生效的 CSS 规则背后的原因。
恐怕我不知道。 🙂 但我会把它作为一个引用提出来，以便在它之前被忽略的情况下给它一个小的提升，并希望社区中的其他人知道更多。 🤞