Я делаю несколько стилей для печатной брошюры на моем клиентском сайте, которая потенциально может содержать длинные неупорядоченные списки информации.
Моя проблема заключается в том, что при печати в Firefox весь <UL> будет разбит на новую страницу, а не на дочерние <li>, что означает, что она не течет с другим контентом на странице.
Я нашел, что свойство CSS page-break-inside поддерживается только в Opera и IE8, знает ли кто-нибудь об альтернативе этому свойству или другом методе, который я могу использовать, чтобы предотвратить перерыв всего списка на новую страницу.
Ура!
ОБНОВЛЕНИЕ [23.11.2011]: Я смог использовать работу по моей проблеме, поскольку печатный документ генерируется в ответ на выбор пользователя, поэтому эта страница будет только когда-либо печататься. Я (очень неохотно) отбросил семантику и удалил UL и заменил LI на DIVs, которые прерываются правильно. Вопрос по-прежнему стоит, хотя для тех, кто имеет аналогичную проблему, но использует один и тот же HTML для печати и экрана.
Я воспроизведу проблему, с которой я столкнулся, и отправлю необходимые HTML и CSS, как только смогу.
Рассмотрим программное удаление тегов UL для печатной версии. Вы должны иметь возможность отображать элементы LI одинаково с некоторым стилем.
JavaScript или даже jQuery могут справиться с этим достаточно легко, но я уверен, вы могли бы позаботиться об этой стороне сервера.
Я знаю, что это не технически корректный HTML, но иногда вам нужно сгибать правила, когда HTML/CSS не предлагает вам гибкости.
Кредит переходит на блог david walsh
@media screen {
.page-break { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
Для немного лучшей поддержки браузера вы можете использовать это:
ul li {
page-break-after: avoid;
}
ul li:first-child {
page-break-after: auto;
}
Должен работать и в IE7. Но не работает в Firefox. Браузеры просто сосут, когда дело доходит до печати.