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

Question

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

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

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>

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 параметр: "размер блока: поле содержимого". К этому я привел предостережение о "блочных элементах с границами", сделанное Ричардом Парнаби-Кингом /questions/6711262/razryiv-stranitsyi-css-ne-rabotaet-vo-vseh-brauzerah/6711280#6711280.

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

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

@media print {

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

}

Answer 4

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

<div style='float:left'>

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

</div>

Answer 5

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

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

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

РЕДАКТИРОВАТЬ: я забыл добавить, что другое место, где я столкнулся с этим, когда шаблон объявил всю страницу (обычно называется основной или основной оболочки) с display:inline-block;

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

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

~ techdude

Answer 6

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

Answer 7

Убедитесь, что у родительского элемента есть display:block; скорее, чем display: flex;. Это помогло мне решить проблему

Answer 8

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

Answer 9

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

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