Какие браузеры поддерживают манипулирование разрывом страницы с помощью CSS и элемента разрыва страницы?

Question

Я пытаюсь использовать CSS-директиву разрыва страницы, класс которой должен быть присоединен к тегу div или тегу таблицы (я думаю, что это может работать только с блочными элементами, и в этом случае это должно быть стол).

Я перепробовал все учебные пособия, которые предположительно описывают, как именно это сделать, но ничего не работает. Является ли это проблемой поддержки браузера или кто-то на самом деле получил эту работу, точный фрагмент CSS выглядит следующим образом:

@media print {

  .noPageBreak {
     page-break-inside : avoid;
  }
}

Answer 1

Safari 1.3 и более поздние версии (не знаю около 4) не поддерживают разрыв страницы (попробуйте или посмотрите здесь: http://reference.sitepoint.com/css/page-break-inside). Ни один не делает Firefox 3 или IE7 (не знаю о 8).

С практической точки зрения поддержка этого атрибута является ОЧЕНЬ пятнистой, на данном этапе его вообще не имеет смысла использовать. Вам бы повезло, если бы даже 10% ваших посетителей имели браузеры, которые могут это поддерживать.

Решение, которое я использовал, было добавить

page-break-after:always

к определенным элементам div или добавьте элемент div-разрыва страницы, где вы хотите разрывы. Я знаю, что это довольно сложно, потому что это не совсем то, что вы хотите, и приводит к тому, что контент не достигает нижней части печатной страницы, но, к сожалению, лучшего решения нет (докажите, что я неправ!).

Другой подход заключается в создании таблицы стилей, которая удаляет все посторонние элементы (display:none) и заставляет основное содержимое перетекать в один основной столбец. По сути, превратить его в один столбец, текстовый документ.

Наконец, избегайте использования плавающих элементов и столбцов при стилизации для принтеров, это может сделать IE (и FF) странным.

Answer 2

Safari 1.3+, Opera 9.2+, Konquerer и IE8 поддерживают его, по крайней мере, до некоторой степени.

Firefox, видимо, до сих пор нет.

Answer 3

• Firefox не поддерживает это с 2010-11-30, и поэтому не будет в Firefox 4.
• IE8 поддерживает разрыв страниц внутри: избегайте - но когда я попробовал это на IE9, он не очень успешно избегал разрывов страниц (это может быть регрессия, или, возможно, IE8 также способен избегать разрывов страниц только в очень простых случаях).
• AFAIK это не работает ни в одном браузере webkit; конечно не в хроме.
• Это на самом деле работает в Opera, даже на реальных сайтах.

Answer 4

Safari 1.3 и более поздняя поддержка page-break-inside,

Как и Konqueror.

Answer 5

В дополнение к ответу Eamon Nerbonne о рендеринге IE (IE8+), вам нужно убедиться, что браузер работает в стандартном режиме. В этой статье на MSDN показано, что необходимо - включая метатег в html, чтобы вызвать проблему:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Чувствуется клуджи, но там у вас это... кажется, работает более последовательно.

Answer 6

По предварительным запросам трудно найти актуальную статистику поддержки браузером, но, похоже, Firefox 4beta6 поддерживает ее, а Chrome 7 - нет. Chrome также разбивает страницы на пол строки текста, поэтому часть текста отображается на одной странице, а часть - на следующей. Нехарактерное отсутствие внимания к деталям, но я думаю, что ни Google, ни Apple не заботятся о печати вещей.

Firefox 4 также добавляет несколько хороших верхних и нижних колонтитулов к вашим отпечаткам с URL, заголовком страницы, названием сайта, количеством страниц и временем. Ницца.

Answer 7

Я пытаюсь использовать CSS-директиву разрыва страницы, класс которой должен быть присоединен к тегу div или тегу таблицы (я думаю, что это может работать только с блочными элементами, и в этом случае это должно быть стол).

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

Во-вторых, <div> элементы обычно являются элементами блочного уровня, поэтому нет проблем с применением page-break-inside к <div> элемент.

Наконец, вам не нужно оборачивать @media, Вам нужно только @media если вы хотите применить медиа-независимые правила только к одному носителю, например, если вы хотите использовать display: block только для одного носителя. В этом случае вам не нужно скрывать эти правила от других носителей, потому что они все равно будут применяться только к переносимым носителям.