CSS: print long div inside modal, IE 没有第二页

Question

我正在开发该项目的新版本，我在打印 CSS 样式时遇到了一些问题。

这里是旧项目：

https://www.traffwebdemo.co.uk/parking/main.html

打印步骤：

单击扳手按钮 -> 打印机按钮 -> 选择模板，将打开一个模式，然后你可以在两个方向上打印，这是通过 iframe 和 2 css 的混合完成的，一个在主项目中，一个在 iframe 本身中。

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

由于地图的限制，我不再使用 iframe，我仍在调用 html 模板，但随后我在模式中克隆了它的主体并再次摆脱的 iframe。

这里是新版本：

https://www.traffwebdev.uk/parking/test.html

项目的两个版本都使用 Bootstrap 但是旧版本调用 iframe 并且我打印 iframe bootstrap 未加载，新方法摆脱 iframe 所以 Bootstrap 干扰打印。

我在 Chrome 中的方向字段有问题，在所有其他浏览器中没有第二页，但在深入研究 Bootstrap 问题后，我发现覆盖 [=47] 可以解决这个问题=] 规则

 @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 中打印。

Answer 1

我设法用下面的代码解决了这个问题，#printMod 是 bootstrap 模式本身，我删除了任何 flex 属性和浮动。然后我将 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;
    }
  }
}

Answer 2

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

http://plnkr.co/edit/fspygnqWhsosqDTds0Og?p=preview

/**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;
          }

CSS: print long div inside modal, IE 没有第二页

CSS: print long div inside modal, no second page in IE

css

printing

cross-browser

bootstrap-4