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

У меня были большие проблемы с печатью из Firefox (любая версия, моя - 16.0.2, но даже Aurora dev builds сделала то же самое). При печати страницы "Сжатие" в окне предварительного просмотра печати не работает. Единственный способ, как разместить страницу на бумаге, - это выбрать Zoom 70% в том же диалоговом окне. Другая проблема: он печатает только первую страницу. Что делать?

Ответ 1

Мне нужно было адаптировать файл CSS для печати, поэтому я сделал это. Он работает безупречно где угодно, но не в Firefox. В чем была проблема?

Сначала я попытался указать ширину и высоту для BODY и HTML в файле print.css. Чем поля и т.д.

Позже я понял, в чем проблема: стандартный файл CSS имел в нем следующее:

body {
 ...
 overflow-x: hidden;
 overflow-y: scroll;
}

Итак, я добавил следующее в файл print.css:

body {
 overflow-x: visible;
 overflow-y: visible;
}

Я думаю, если бы у вас было только переполнение, указанное в CSS, а не -x и -y, вам нужно было бы указать только переполнение: видимое в файле print.css.

Печать из Firefox теперь работает так, как должна. Я просто подумал, что это может помочь кому-то, кто имеет странное поведение печати в Firefox.

Ответ 2

В дополнение к ответу Kokesh, иногда атрибут

display: table

тоже порождает эту проблему. Поэтому вам нужно изменить его на "блок" или другой, который соответствует вашим запросам.

Ответ 3

Я попробовал исправления, предложенные в других ответах, но они не решили проблему для меня. После многих исследований и испытаний и ошибок я нашел эту статью в списке. Я был настроен скептически, потому что он такой старый, но он утверждает, что:

Если элемент с плавающей точкой проходит мимо нижней части печатной страницы, остальная часть поплавка фактически исчезнет, так как она не будет напечатана на следующей странице.

Поскольку у меня есть большой плавающий контейнер, я думал, что попробую. Итак, я сделал смесь из других ответов и этой статьи и придумал следующее:

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

Итак, в основном:

Настройка тела на overflow: visible
Элементы, которые ведут себя как обертки к display: block, удаляют все стили flex и reset height при необходимости
Устранить float на длинных контейнерах

Эта смесь работала для меня! Я так счастлив, что решил поделиться с вами:)