details标签默认打印时会展开，所有summary及后续内容完整输出；因打印引擎仅依据css渲染结果判断可见性，不读取js状态，故需用visibility配合position:absolute控制显隐，并针对不同浏览器做兼容处理。
details标签默认打印时会展开还是折叠
默认会展开，且所有<summary></summary>和后续内容都会被完整输出。浏览器不区分“当前是否展开”，只要DOM存在、display未被覆盖，就照单全收。这不是bug，是打印引擎对可见性判断的简化逻辑——它只看CSS渲染结果，不读JS状态。
@media print中控制details显隐的正确写法
不能直接对details设display: none再对summary单独显示，那样会破坏语义结构，且部分旧版Edge会忽略子元素样式继承。稳妥做法是统一用visibility配合定位清理空白：
-
details整体设visibility: hidden，防止折叠态下<summary></summary>仍占位 - 若需只打印展开内容，给
details[open]加visibility: visible !important（注意：IE11不支持属性选择器，需额外class标记） - 必须补
position: absolute; left: -9999px到details上，否则隐藏后仍可能撑高页边距或导致分页错乱
summary内容在打印时重复出现的坑
当details处于open状态，且你用了visibility: visible恢复其子树时，<summary></summary>文本会和后续内容一起输出——但某些PDF导出工具（如Chrome“另存为PDF”）会把<summary></summary>当成独立段落，导致标题重复两遍。解决方法只有两个：
- 在打印样式里强制
summary { display: block; font-weight: bold; margin-bottom: 0.2em; }，让视觉上更像标题而非可交互控件 - 如果业务允许，打印前用JS临时移除
summary节点：document.querySelectorAll('details[open] summary').forEach(el => el.remove())，但必须监听afterprint事件还原DOM
移动端Safari和Electron环境下的兼容性差异
iOS 16+ Safari对@media print中details的处理基本正常，但iOS 15及更早版本会无视visibility规则，强制输出全部内容。Electron（v22+）则相反：它默认禁用details的打印渲染，哪怕加了visibility: visible也不生效。此时唯一可靠路径是预处理DOM：
- 打印前遍历
details[open]，把summary文本提取出来，拼到第一个子元素前作为<h3></h3>或<p class="print-header"></p> - 然后用
display: block显式展示整个details内容，再调用window.print() - 这个过程必须在
beforeprint事件中做，不能靠点击按钮后setTimeout——时机稍晚就会被截断
真正难搞的不是怎么让它显示或隐藏，而是不同环境对“open”状态的感知不一致：有的读DOM属性，有的读JS属性，有的只认渲染树。别指望一套CSS通吃，得按目标平台分条件处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
