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

Question

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

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

@media print { 

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

Answer 1

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

Firefox, по-видимому, все еще нет.

Answer 2

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

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

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

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

Answer 3

Safari 1.3 and later поддержка page-break-inside.

So does Konqueror.

Answer 4

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

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

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

page-break-after:always

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

Как немного больше информации для Eamon Nerbonne's answer об рендеринге IE (IE8 +), вам необходимо убедиться, что браузер находится в стандартном режиме. This article on MSDN показывает, что необходимо - в том числе мета-тег в вашем HTML, чтобы заставить вопрос:

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

ощущению запутано, но у вас есть это ... кажется, работает более стабильно.