安全恢复 display 值的关键是“还原而非显示”，推荐三法：预定义 CSS 类切换、JS 存取原始 display 值、现代浏览器用 display: revert；混用 display: none 与 visibility: hidden 会导致布局错位或内容不重绘。
display: none 切换时为什么元素“消失又不回来”
不是 CSS 失效，而是你恢复时写的 display: block 和元素原本的显示模式不匹配。比如对一个 <span></span> 强行设 display: block，它会从行内变成块级，独占一行、撑高父容器；对一个 flex 子项设 display: block，它就脱离了 flex 布局上下文，尺寸和对齐全乱。浏览器不会“记住”你之前怎么设的，它只认当前值。
怎么安全地恢复 display 值
关键不是“显示出来”，而是“还原回去”。有三个靠谱办法：
- 用预定义 CSS 类切换：
.is-hidden { display: none; }和.is-shown-inline { display: inline; }、.is-shown-flex { display: flex; }等，按需加 class，不碰内联样式 - JS 中存原始值：
const original = getComputedStyle(el).display;隐藏前保存，恢复时写回el.style.display = original; - 用
display: revert（Chrome 94+、Firefox 95+、Safari 14.5+ 支持）：它会退回到用户代理样式表的默认值，比如<div> 回 <code>block，<span></span>回inline，但 IE 和旧 Safari 不支持display: none 和 visibility: hidden 混用会出什么问题
它们根本不是一个量级的操作：
-
display: none：元素彻底下线——不占空间、子元素不渲染、iframe暂停加载、resize监听器不触发、第三方地图/图表组件需要手动调invalidateSize() -
visibility: hidden：元素还在原位——占空间、可 focus（除非加pointer-events: none）、子元素能用visibility: visible单独翻盘 - 常见翻车：用
visibility: hidden做下拉菜单，结果点击区域错位；用display: none隐藏含canvas的图表后直接 show，没重绘也没 resize，画面空白
动态切换时最易忽略的副作用
display 切换不只是视觉开关，它会中断底层行为：
立即学习“前端免费学习笔记（深入）”；
- 被
display: none的iframe会销毁 JS 上下文，恢复后等同于重新加载 - CSS
transition或动画在隐藏期间完全暂停，不会补帧，也不会触发animationend - 如果元素是 Grid 或 Flex 容器的子项，隐藏后再用
display: block恢复，它就不再是 grid/flex item，布局规则全部失效 - 某些 UI 库（如 Ant Design 的
Popover、Leaflet 地图）依赖元素尺寸计算，display: none后必须手动触发updatePosition()或invalidateSize()
真正麻烦的从来不是“怎么藏”，而是“藏完怎么自然地露出来”——尤其当元素受框架类名、CSS-in-JS 或嵌套布局影响时，硬写
display: block几乎必踩坑。 -
