嘿，我看你在打印地图模态框的时候碰到了俩棘手问题：预览第一页大片空白，明明要隐藏的元素还在预览里冒出来。我帮你拆解下问题根源，再给你一套能解决的方案～

问题出在哪？ #

1. 隐藏元素没彻底藏住：你原来的CSS只选中了带id="overlay"的那个遮罩，但HTML里还有第二个不带id的.overlay，完全没被处理；而且#print-button *是选按钮里的子元素（比如打印图标），不是按钮本身，所以按钮本体还会显示在预览里。
2. 空白来自布局冲突：模态框用position:absolute定位，加上页面其他没隐藏的元素（或者未彻底移除的遮罩）占据了空间，导致打印第一页出现大片空白。

修复后的打印样式代码 #

@media print {
  /* 先把页面上除了模态框的所有内容都藏起来，避免干扰 */
  body > *:not(#map-modal) {
    display: none !important;
  }

  /* 彻底隐藏所有不需要的元素：所有遮罩、关闭按钮、打印按钮 */
  #overlay,
  .overlay,
  #close-modal-button,
  #print-button {
    display: none !important;
    visibility: hidden !important;
  }

  /* 重置模态框的布局，让它完全适配打印页面 */
  #map-modal {
    position: relative !important; /* 换掉absolute，避免定位偏移导致空白 */
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
    border: none !important; /* 去掉模态框默认的边框阴影，打印更清爽 */
    box-shadow: none !important;
  }

  /* 调整模态框内部内容的边距，避免多余空白 */
  #map-modal .modal-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 确保地图iframe和图片在打印时自适应宽度，不会溢出 */
  #map-modal iframe,
  #map-modal img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 统一设置打印页面的边距，避免浏览器默认边距乱搞 */
  @page {
    margin: 1cm;
  }
}

为啥这么改能解决问题？ #

• 全量隐藏无关内容：用body > *:not(#map-modal)直接把页面上除了模态框的所有元素都藏了，彻底杜绝其他内容干扰打印布局。
• 覆盖所有要隐藏的元素：不管是带id还是不带id的.overlay，还有打印/关闭按钮，都被精准选中并设置display:none!important，确保它们从打印布局里彻底消失，不会留空间。
• 重置模态框定位：把absolute改成relative，让模态框跟着打印文档流走，不会因为绝对定位的偏移产生空白；同时设置宽度100%，适配打印页面。
• 适配媒体内容：给iframe和图片加了自适应宽度，避免打印时内容溢出页面，保证地图和图片都能完整显示。

这样调整后，那个阻止地图滚动的遮罩会被彻底隐藏，第一页的空白应该就消失了，该藏的元素也不会再出现在预览里啦～

内容的提问来源于stack exchange，提问作者Wrumble