CSS-разрыв страницы не работает во всех браузерах

У меня возникли проблемы с работой в большинстве браузеров, за исключением IE (он работает корректно в IE6) и Opera.

Firefox отделяет divs правильно, но только печатает первую страницу.

Chrome и Safari применяют только разрыв страницы до последнего div.

Как я могу заставить это работать во всех браузерах правильно?

HTML:

В div с идентификаторами #leftNav и #mainBody установлены float:left , поэтому они отображаются хорошо.

Я только хочу напечатать classы .pageBreak , скрывая #leftNav и остальную часть #mainBody с CSS.

CSS:

 @media print { #leftNav { display:none; } #mainBody { border:none; margin:none; padding:none; } } 

Родительские элементы не могут плавать на них.

Установка float:none из всех родительских элементов не делает page-break-before:always работает правильно.

Другими вещами, которые могут сломать разрыв страницы, являются: использование разрывов страниц внутри таблиц, плавающих элементов, элементов встроенного блока и блоков с границами.

Ради завершения и в интересах других, у которых есть такая же проблема, я просто хочу добавить, что мне также пришлось добавить overflow: visible тегу body, чтобы FireFox выполнял разрывы страниц и даже распечатывал больше, чем только первая страница.

Я обнаружил, что classы Twitter Bootstrap добавляют кучу материала на страницу, что затрудняет работу страниц. Firefox работал сразу, но мне приходилось следовать различным предложениям, чтобы заставить его работать в Chrome и, наконец, IE (11).

Я следил за предложениями здесь и в другом месте. Единственное свойство, которое я «обнаружил», которого я еще не видел, это «размер windows». Bootstrap может установить это свойство в «box-sizing: border-box», который сломал IE. IE-friendly параметр – «box-sizing: content-box». Меня привели к этому оговоркой о «блочных элементах с границами», сделанном Ричардом Парнаби-королем https://stackoverflow.com/a/5314590/3397752 .

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

Это настройка, которая работала для меня (Chrome, FF, IE 11). В принципе, он пытается переопределить все проблемные настройки во всех div на печатной странице. Конечно, это может также нарушить ваше форматирование, и это будет означать, что вам придется найти другой способ настройки страницы.

 @media print { div { float: none !important; position: static !important; display: inline; box-sizing: content-box !important; } } 

Хотя это не задокументировано, следует отметить, что свойства разбиения страницы не могут применяться к элементам таблицы. Если у вас есть какие-либо элементы с display: table; или display:table-cell; (распространенный во многих шаблонах в classе clearfix), тогда содержащиеся элементы будут игнорировать правила разрыва страницы. Просто отмените правило в таблице стилей печати, и вы должны быть в порядке (после того, как поплавки также были удалены, конечно!).

Вот пример того, как это сделать для популярной проблемы clearfix.

 .clearfix:before, .clearfix:after{ display: block!important; } 

EDIT: Я забыл добавить, что другое место, которое я натолкнуло на это, – это когда шаблон объявил всю страницу (обычно называемую основной или основной оболочкой) с display:inline-block;

Если раздел находится внутри встроенного блока, он не будет работать, поэтому держите глаза открытыми для них. Изменение или перезапись display:inline-block; с display:block должен работать.

Надеюсь это поможет!

~ techdude

«Версии Firefox до 3.5 включительно не поддерживают значения« избегать »,« левое »или« правое ». Поддержка IE также является частичной, вы можете достичь того, что необходимо: page-break-before: always; который поддерживается во всех браузерах, «но печатайте только первую страницу»: я не думаю, что это связано с CSS, я полагаю, что он находится в окне печати браузера 🙂

У меня была position: absolute; что привело к тому, что это не сработало.

Существует решение, если родитель имеет float. Для элемента, к которому вы применили разрыв страницы, сделайте элемент overflow: hidden. Это все. Это сработало для меня.

 

какой у вас код?
как это?:

 
 
Давайте будем гением компьютера.