Разрыв страницы -* не работает в Google Chrome

Мне просто нравится divs под .wp_left_coldiv размещаться на отдельных страницах. Это мой код CSS.

.wpi_left_col > div {
     page-break-after: always !important;
     page-break-inside: avoid !important;
}

Это работает на Firefox. Почему это не работает в Google Chrome?

Источник

6 ответов

Итак, после некоторого разочарования я нашел решение. Это хак, но Chrome не поддерживает разрывы страниц должным образом, так что... Вы должны установить все родительские элементы в явном виде с плавающей точкой: нет. В этом примере я печатаю содержимое с вкладками.

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="tab">print page 1</div>
                <div class="tab">print page 2</div>
                <div class="tab">print page 3</div>
            </div>
        </section>
    </main>
</body>

Тогда ваш CSS выглядит примерно так.

html, body, .main-content, .tabs, .tabbed-content { float: none; }

.tab {
    display: block; /* unhide all tabs */
    break-before: always;
    page-break-before: always;
}
Источник

Это июль 2014 года, и по состоянию на сегодня делает float: нет; для всех родительских элементов это то, что работает для меня:

@media print {
  table {float: none !important; }
  div { float: none !important; }
  .page-break { page-break-inside: avoid; page-break-before: always; }
  .dont-print { display: none; }  
}

Это решение работает на Firefox, Chrome и Safari. У меня есть! Важный там, потому что я использую Bootstrap, а bootstrap делает float: оставленный по умолчанию на div.

Источник

3 года спустя float:none !important за div было решение для получения перерыва в работе Chrome. Не обязательно float:none все родители (body или же html)

@media print {
    div {
        float: none !important;
    }
}
Источник

<div style="display: inline-block; "> было сообщено как способ избежать разрыва страниц в середине чего-то, YMMV. Кроме того, попробуйте удалить границы и убедитесь, что нет поплавков. См. Также CSS Page-Break не работает во всех браузерах.

Источник

Вот более простое решение для установки всех родительских элементов, чтобы они не плавали при печати:

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}
Источник

У Chrome есть проблемы с обработкой разрыва страницы, и разрыв страницы внутри является известной ошибкой, и Google несколько раз избегал использовать этот тип стилей, поскольку не только Chrome, но и многие другие браузеры сталкиваются с проблемами при его использовании.

Вам следует подумать о стилизации таблиц с учетом DIV, а не самих таблиц. Лично в наше время лучше всего избегать использования таблиц, поскольку они не так гибки, как DIV-стилизация.

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

Вот простой пример того, как стилизовать первую таблицу, которая у вас есть в DIV, и она идеально подходит для пикселей, но должна дать вам представление. Почти то же самое с некоторыми улучшениями, но без используемого шрифта выглядит не так хорошо, не использует изображение в качестве фона, который ++: P

CSS

#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}

HTML

<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
 <p>Example Work Number 1</p>
 <p>Example Work Number 2</p>
 <p>Example Work Number 3</p>  
</div>
<div style="clear:both;"></div>
</div>
</div>

Я сохранил этот код онлайн, чтобы вы могли его увидеть и протестировать, посмотрите на http://jsfiddle.net/tsd4V/

Опять же, это просто лучший метод, вы можете использовать стиль таблицы, но не используйте разрыв страницы, если вы хотите хорошую совместимость с различными браузерами.

Источник
Другие вопросы по тегам