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

Question

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

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

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

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

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>

Для 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

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

Answer 3

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

Я следовал предложениям здесь и в других местах.Единственное свойство, которое я «обнаружил», о котором я еще не упомянул, - это «размер коробки».Bootstrap может установить это свойство в "box-sizing: border-box", что сломало IE.Дружественный к IE параметр: «Размер блока: поле содержимого».К этому я привел предостережение о «блочных элементах с границами», сделанное Ричардом Парнаби-Кингом 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 4

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

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

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

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

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

Answer 5

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

<div style='float:left'>

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

</div>

Answer 6

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

Answer 7

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

Answer 8

какой у тебя код?как это?:

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