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

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

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

@media print {

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

Ответ 1

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

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

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

page-break-after:always

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

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

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

Ответ 2

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

Firefox, по-видимому, до сих пор этого не делает.

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

Safari 1.3 и более поздние версии поддерживают page-break-inside.

Также Konqueror.

Ответ 6

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

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

Ответ 7

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

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

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