Может ли кто-нибудь помочь мне решить проблему. Это кажется очень тривиальным, но я не мог понять, что случилось. Вот настоящая страница: 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?
Итак, после некоторого разочарования я нашел решение. Это взломать, но 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;
}
В июле 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 года float:none !important для div было решением для получения перерыва, работающего в хроме. Не обязательно для float:none всех родителей (body или html)
@media print {
div {
float: none !important;
}
}
<div style="display: inline-block; "> сообщается как способ избежать разрыва страницы в середине чего-то, YMMV. Кроме того, попробуйте удалить границы и убедитесь, что плавающих нет. См. Также CSS-брейк не работает во всех браузерах.
У 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/
Опять же, это лучший метод, который вы можете использовать для стилизации таблицы, но не используйте разрывы страниц, если вам нужна хорошая совместимость с браузером.
здесь проще решить, чтобы все родительские элементы не плавали при печати:
@media print {
* {
float: none !important;
}
.tab {
display: block;
break-before: always;
page-break-before: always;
}
}