Page-break- * не работает на Google Chrome

Может ли кто-нибудь помочь мне решить проблему. Это кажется очень тривиальным, но я не мог понять, что случилось. Вот настоящая страница: http://goo.gl/ViMKl. Мне просто нравится divs под .wp_left_col div размещаться на отдельных страницах. Это мой код css.

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

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

Ответы

Ответ 1

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

<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;
}

Ответ 2

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

@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

Спустя 3 года float:none !important для div было решением для получения перерыва, работающего в хроме. Не обязательно для float:none всех родителей (body или html)

@media print {
    div {
        float: none !important;
    }
}

Ответ 4

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

Ответ 5

У 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/

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

Ответ 6

здесь проще решить, чтобы все родительские элементы не плавали при печати:

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}