Какие браузеры поддерживают манипуляции с разрывом страницы с помощью 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" />
Чувствует себя клоччо, но там у вас есть... кажется, работает более последовательно.