Firefox печатает дополнительную пустую страницу

Question

У меня есть веб-страница, которая печатается правильно в Chrome, Safari и IE, но у Firefox есть следующая проблема:

Она печатает только заголовок на первой странице.Остальное пустое.Фактический контент показан только на странице 2.

Погуглив немного, я обнаружил, что стиль "float: left" вызывает его.Если я удаляю «float: left», он печатается нормально, но он не выглядит так, как должен, так как должен отображать 2 столбца рядом друг с другом в печати и на экране.

Есть лиРешение этой проблемы?

Спасибо.

Answer 1

Привет, у меня была похожая проблема, но у меня была дополнительная пустая страница в КОНЦЕ, когда я печатал.IE сделал бы то же самое, поэтому я решил, что у меня проблемы с CSS.

Короче говоря, я обнаружил, что если у вас есть абзац в качестве первого элемента в элементе body, а у абзаца есть 'margin'Свойство установлено в CSS, в конце печатается пустая страница.Интересно, что он печатал только пустую страницу, если была только одна страница.Если я удалил поле из стиля ИЛИ добавил элемент перед абзацем, он не печатал лишнюю пустую страницу.

JAB

Answer 2

Я обнаружил, что установка высоты страницы в вашем HTML немного меньше, чем указано в высоте страницы принтера, предотвращает проблему с пустой страницей.

Answer 3

Была точная проблема - заголовок, за которым следовала пустая страница или половина страницы.Если ваш макет сильно зависит от таблиц, это может быть правило vertical-align с любым значением, кроме middle или baseline.

Установка правила на середину, как показано, исправлено

@media print {
    table tr td {
        vertical-align: middle;
    }
}

Answer 4

Попробуйте использовать таблицу стилей для печати:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

В этой таблице стилей вы сможете удалить float:left для печати и не повлиять на макет вбраузер.

Al

Answer 5

Дополнительная пустая страница в Firefox также может быть вызвана использованием display: flex и min-height: 100vh, которые я использовал для создания липкого нижнего колонтитула.

Чтобы исправить, просто добавьте настройку стиля печати display: block и min-height: 100%.