html - 打印模式仍然显示 'hidden' 内容

Question

我正在尝试打印模态框的内容，但它在打印预览中显示出很大的空白以及应该隐藏的内容。

尽管对特定事物添加了隐藏，它们仍会显示在预览中。

还有一个隐藏的 div 以防止在滚动时在 map 上滑动，这就是为什么预览的第一页看起来是空白的原因。

@media print {
  #overlay, #close-modal-button, #print-button * {
    visibility: hidden;
    display: none !important;
  }
  #map-modal * {
    visibility: visible;
  }
  #map-modal, #map-modal {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
    display: block;
  }
}

<div id="map-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions">
  <div id="map-modal-content" class="modal-content">
    <h4 id="modal-title">Map of the area and directions</h4>
    <div class="container center">
      <div class="row">
        <div id="overlay" class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <div class="center">
            <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1T1AFckKqP4J38fIJswg8uEr42hyB3R5y&ll=51.06791175093598%2C0.21307320000005348&z=11" allowfullscreen></iframe>
          </div>
      </div>
      <hr>
      <p id="modal-text"><b>St Dunstan’s Church, Mayfield TN20 6AB</b><br>Mayfield village is signposted on the A267 and the church is situated in the middle of the village on the High Street.</p>
      <div class="row">
        <div class="container center">
          <div class="col s12">
            <img id="map-image" class="center materialboxed" src="./assets/Map1.png">
          </div>
        </div>
      </div>
      <p id="modal-text">The car park is sign posted on the right-hand side of the High Street as you are driving up the hill. The easiest way to get to the church from the car park is to walk through the car park for The Middle House as seen on the map. The marked car park in Mayfield is free.</p>
      <hr>
      <p id="modal-text">The drive from St Dunstan’s Church to the reception at Juddwood Farm is approximately 30 minutes.</p>
      <p id="modal-text"><b>Juddwood Farm, Haysden Lane, Tonbridge TN11 8AB </b></p>
      <div class="row">
        <div class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll=51.096412867708054%2C0.240690000000086&z=11" allowfullscreen></iframe>
      </div>
      <div class="row">
        <div class="container center">
          <div class="col s12">
          <img id="map-image" class="materialboxed" src="./assets/Map2.png">
        </div>
      </div>
    </div>
    </div>
  </div>
  <div class="row">
    <div class="container center">
      <a id="print-button" onClick="window.print()" class="black waves-effect waves-light btn z-depth-3" href=""><i class="material-icons right">print</i>Print this page</a>
    </div>
  </div>
  <div class="modal-footer transparent">
    <a id="close-modal-button" class="right transparent btn-flat" (click)="closeModal()">Close</a>
  </div>
</div>

我在谷歌上搜索了很多，但看不出原因。这是打印预览的 gif https://imgur.com/a/Hnfcr

Answer 1

看起来您的声明#print-button * 正在寻找#print-button 的子项，而不是#print-button 本身。

另外，不清楚为什么要重复 #map-modal, #map-modal { ... 您是否打算选择 #map-text ？