CSS：在模式中打印长div，在IE中没有第二页

我正在做一个新版本的项目，我有一些打印CSS样式的问题

这里是老项目：

打印步骤：

单击扳手按钮->打印机按钮->选择模板，将打开一个模式，然后您可以在两个方向上打印，它使用一个iframe和两个css的组合完成，一个在主项目中，一个在iframe本身中

css打印隐藏所有内容，并在打印时仅显示模式内容，因此如果您尝试直接在主页上打印，您将只有一个白色页面

由于映射的限制，我不再使用iframe了，我仍然在调用html模板，但是我在模态中克隆了它的主体，并再次摆脱了iframe

以下是新版本：

项目的两个版本都使用引导，但旧版本调用iframe，而我打印iframe引导未加载，新方法是删除iframe，因此引导会干扰打印

我在Chrome中的方向字段有问题，在所有其他浏览器中都没有第二页，但在深入研究引导问题后，我发现这可以通过覆盖CSS规则来解决

 @page {
   size: auto
 }
 .flex-class {
   display: block;
 }

现在我有了Firefox和Opera的第二个页面，但很遗憾我们的客户使用的是IE11。。。我在IE中没有第二页

如何在IE中打印这两页？这些规则似乎完全被忽视了

#pllegwrapper {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

#pagesplit {
  display: block;
  page-break-before: always !important;
  break-before: page !important;
}

更新

---

我已将

display:table

应用于包含2页的主div，现在我可以在IE中打印，但不能在FF中打印。

我设法解决了下面代码的问题，

#printMod

本身就是引导模式，我删除了所有flex属性和float。 然后我将

display:table

应用于

#printMod

和

#printBody

，最后一个是

.modal body

模态元素中的主容器。 修复它需要相当长的时间，这仅仅是因为Bootstrap

@media print {

  @page {
    size: auto;
  }

  body {
    margin:0 !important;
    padding:0 !important;
    height:100% !important;
    width: 100% !important;
  }
  body * {
    visibility: hidden;
  }

  #printMod,
  #printMod * {
    visibility: visible;
    float: none;
    display: block;
    flex: none !important;
  }

  #printBody {
    display: table !important;
    margin: auto !important;
  }

  #printMod {
    & {
      display: table !important;
      position: absolute;
      left: 0;
      top: 0;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      break-inside: auto;
      border: none !important;
      overflow: visible !important;
    }

    .modal-header,
    .modal-footer {
      display: none;
      border: none !important;
    }

    .modal-dialog,
    .modal-content,
    .modal-body {
      display: block;
      overflow: visible;
      height: 100% !important;
      max-height: 100% !important;
      padding: 0;
      border: none !important;
    }

    #plwrapper,
    #pllegwrapper {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    #pagesplit {
      display: block;
      page-break-before: always !important;
      break-before: page !important;
    }
  }
}

---

只需将模型的位置设置为相对位置

/**Modal Styles for Print**/

        @media print {
          body * {
            visibility: hidden;
          }
          #print-content * {
            visibility: visible;
            overflow: visible;
          }
          #mainPage * {
            display: none;
          }
          .modal {
            margin: 0;
            padding: 0;
            min-height: 550px;
            visibility: visible;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
            position: relative;
          }
          .modal-dialog {
            visibility: visible !important;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }