CSS-брейк не работает во всех браузерах

Question

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

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

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

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

HTML-:

<div id="leftNav"> 
    <ul> 
    <!--links etc--> 
    </ul> 
</div> 
<div id="mainBody"> 
<div id="container"> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
</div> 
</div> 

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

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

CSS-:

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

Answer 1

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

Установка float:none на все исходные элементы составляет page-break-before:always.

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

Answer 2

что ваш код?
как это ?:

<style> 
@media print 
{ 
table {page-break-after:always} 
} 
@media print 
{ 
table {page-break-before:always} 
} 
</style> 
 

поддержка

Answer 3

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE также частичная вы можете добиться того, что необходимо: страницы-обкатка перед: всегда; который поддерживается во всех браузерах «но только печатать первую страницу»: я не думаю, что это связано с css, я полагаю, что он находится в окне печати браузера :)

Answer 4

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

Answer 5

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

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

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

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

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

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

~ techdude

Answer 6

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

Answer 7

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

Я следил за предложениями здесь и в другом месте. Единственное свойство, которое я «обнаружил», которого я еще не видел, это «размер окна». 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; 
    } 

} 

Answer 8

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

<div style='float:left'> 

<p style='overflow:hidden;page-break-before:always;'></p> 

</div>