Google Chrome обрабатывает разрывы страниц на разных компьютерах по-разному - PullRequest
Новая
       22

Google Chrome обрабатывает разрывы страниц на разных компьютерах по-разному

0 голосов
/ 25 сентября 2019

Я завершаю работу над таблицей стилей для отчета в веб-приложении и получил уведомление о некоторых проблемах печати на разных машинах.Добавляя разрыв страницы перед моим заголовком, я замечаю тонну добавленного пробела, который, кажется, связан с разрывом страницы.Когда я добавляю background-color: green и т. Д. В верхние или нижние колонтитулы страницы, пробел явно не связан ни с одним из них.Мой компьютер с ОС Windows 10 и Mac OS, которые у меня есть в качестве резервной копии, создают документ для предварительного просмотра, который распознает разрывы страниц, как и следовало ожидать, но на другой машине под управлением Windows 10 появляется добавленный пробел.

ОБНОВЛЕНИЕ - Одна из машин, которая испытывает проблему с разрывами страниц, испытывает проблему только на определенных соединениях WiFi.При подключении к WiFi в моем рабочем месте проблема, похоже, исчезла с его компьютера, но при подключении к WiFi в его рабочем месте проблема возникает снова.Очень странно ....

Я применяю page-break-before: always к содержимому моего заголовка, и код моего сайта выглядит следующим образом: 

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

* {
  box-sizing: border-box;
}

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.report-row-preview {
  min-height: 4cm;
}

.header {
  margin-top: 1cm;
  page-break-before: always;
}

.footer {
  margin-top: 1cm;
}

.copyright {
  text-align: center;
  font-size: 10px;
  margin-bottom: 0;
}

@media print {
  html,
  body {
    width: 216mm;
    height: 279mm;
    background-color: white;
  }
  .page-portrait {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 4%;
    width: 100% !important;
  }
  .no-print {
    display: none !important;
  }
}
<div class="row page-portrait">
  <div class="row header">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row footer">...</div>
</div>

И, наконец, скриншот добавленного пробела, на который я ссылаюсь:

enter image description here

Рад предоставить больше ясности по мере необходимости, я просто бью головой об стену с этим.

...