在打印中使用 HTML5 详细信息元素

Question

我们使用 HTML5 元素

<details>

提供简单的显示/隐藏功能。

这在屏幕上工作正常，但在打印时，任何尚未在屏幕上打开的

<details>

元素在打印时都会被隐藏。

我认为这会起作用：

@media print {
    details { display:block !important }
}

但事实并非如此。

显然，这代表了负面的打印用户体验 - 有人设法让它用于打印吗？

谢谢

Answer 1

截至 2024 年 11 月 15 日 CSS 工作组 (csswg) 第 2084 期的提案

details[open]::details-content { display: contents; }

Answer 2

在元素上，添加

open

属性，但不分配任何值。这是确保细节元素无论如何保持打开状态的最佳方法。 http://www.w3schools.com/tags/att_details_open.asp