CSS: печатать длинный div внутри модального, нет второй страницы в IE

Question

Я работаю над новой версией проекта и у меня возникают некоторые проблемы со стилем печати CSS.

здесь старый проект:

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

ШАГИ К ПЕЧАТИ:

Нажмите на кнопку с гаечным ключом -> кнопку принтера -> выберите шаблон, откроется модальное окно, и затем вы сможете печатать в обоих направлениях, это делается с помощью iframe и сочетанием2 css, один в основном проекте и один в самом iframe.

css print скрывает все и показывает только модальное содержимое при печати, поэтому, если вы попытаетесь напечатать непосредственно на главной странице, у вас будетпросто белая страница.

Я больше не работаю с iframe из-за ограничений с картой, я все еще вызываю html-шаблон, но затем клонирую его тело в модал и получаюизбавьтесь снова от iframe.

здесь новая версия:

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

Обе версии проекта используют Bootstrap, но в то время как старая версия вызывает iframe, и я печатаюзагрузчик iframe не загружен, thНовый способ избавиться от 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 к основному div, который содержит 2 страницы, и теперь я могу печатать в IE, но нев ФФ.

Answer 1

Мне удается исправить проблему с помощью приведенного ниже кода, #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;
    }
  }
}