css - CSS 打印重复内容

Question

我一直在尝试为组件创建自定义样式并且它需要打印，问题是我想要打印的任何内容都是重复的。

我试图在 codepen 中重新创建，但我无法做到。

这是我添加到 css 打印的内容：

@media print and (color) {
  @page {
    margin: 5mm;
    size: A4 landscape;
  }

  * {
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #212121 !important;
    visibility: hidden;
  }
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  body,
  .section-to-print {
    height: auto !important;
  }
  .section-to-print,
  .section-to-print * {
    visibility: visible !important;
  }
  .section-to-print {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
  }
  .section-to-print:nth-child(2) {
    display: none !important;
  }
  .vis-timeline {
    display: none;
  }
  core-dialog,
  .dialog-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

Answer 1

原来问题是父元素有“位置：固定”，这就是我的问题重复的原因。