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

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

14 голосов
/ 23 сентября 2008

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

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

@media print {

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

Ответы [ 7 ]

5 голосов
/ 31 июля 2009

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) будут вести себя странно.

3 голосов
/ 23 сентября 2008

Safari 1,3 + , Opera 9,2 + , Konquerer и IE8 все поддерживают это, по крайней мере, до некоторой степени.

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

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

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

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

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

0 голосов
/ 27 октября 2010

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

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

0 голосов
/ 23 сентября 2008
0 голосов
/ 23 сентября 2008

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

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

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

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

...