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

【问题标题】：CSS: print long div inside modal, no second page in IECSS：在模态中打印长 div，在 IE 中没有第二页
【发布时间】：2019-02-22 10:48:36
【问题描述】：

我正在开发一个新版本的项目，但我在打印 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 问题后，我发现这可以通过覆盖 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 中打印。

【问题讨论】：

标签： css printing bootstrap-4 cross-browser

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我设法用下面的代码解决了这个问题，#printMod 是引导模式本身，我删除了任何 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;
    }
  }
}

【讨论】：