CSS Page-Break не работает во всех браузерах

у меня возникли проблемы с получением этой работы в большинстве браузеров, за исключением 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;
 }
}
41
css page-break

8 ответов

родительские элементы не могут иметь float на них.

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

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

86

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

25

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

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

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

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

@media print {

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

}
15

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

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

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

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

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

надеюсь, что это помогает!

~techdude

6

" версии Firefox до 3.5 и включая их не поддерживают значения avoid, left или right." Поддержка IE тоже частично вы можете достичь того, что нужно :page-break-before:always; который поддерживается во всех браузерах "но только распечатайте первую страницу" : Я не думаю, что это связано с css , я полагаю, что это sth в окне печати браузера:)

5

Я position: absolute; в печати div, которая заставила это не работать.

5

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

<div style='float:left'>

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

</div>
4

какой код?
вот так?: 


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