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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Я следил за предложениями здесь и в другом месте. Единственное свойство, которое я "обнаружил", которого я еще не видел, это "размер окна". Bootstrap может установить это свойство в "box-sizing: border-box", который сломал IE. IE-friendly параметр - "box-sizing: content-box". Меня привели к этому оговоркой о "блочных элементах с границами", сделанном Ричардом Парнаби-королем fooobar.com/questions/146065/....

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

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

@media print {

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

}

Ответ 4

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

Ответ 5

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

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

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

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

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

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

~ techdude

Ответ 6

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

Ответ 7

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


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

Ответ 8

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

<div style='float:left'>

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

</div>