Как правильно контролировать разрыв страницы в функции печати Mozilla Firefox? ⇐ CSS

[Anonymous]

У меня проблема с разрывами страниц и таблицами в Mozilla Firefox. Я хочу разрешить разрыв страницы в первой таблице (.infobox), но это не работает:
таблица: должен быть разрыв
Изображение: таблица отображается неправильно
И я также хочу запретить разрыв страницы между h2 и таблицами, здесь у меня есть заголовок «Строительство» и таблица под ним:
Конструкция: не должно быть разрывов
Изображение: конструкция отображается неправильно
(проблема возникает только в Mozilla Firefox, возможно, из-за заголовков и нижний колонтитул добавлен)
Вот пример HTML-кода того, как выглядит страница:




...



...
...




...


...>
...


...

...




Universitäts- und Landesbibliothek puis BNU

...

...
...
...


Вот CSS-код для печати исходного кода mediawiki по умолчанию:
@media print {
* {
background: transparent !important;
color: black !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important; }
pre,
blockquote {
border: 1px solid #8a8a8a;
page-break-inside: avoid; }
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }

Вот CSS, который я добавил:
@media print {
#site-header, .translations, #mw-data-after-content,#mw-footer,.mw-editsection,.leaflet-control,.article-tabs,.archi-wiki-toolbox {
display: none; }
a{
text-decoration: underline !important;
}
.reference a {
text-decoration: none !important;
}
#toc{
page-break-inside: avoid !important;
}
a[href*="archive"],a[title*="Actualités"] {
display: none !important;
}
h3{
border-bottom-style: solid !important;
}
.infobox{
margin-top:0px !important;
}
@media (orientation: portrait) {
.infobox {
width: 50% !important;
max-width: 50% !important;
min-width: 50% !important;
}
}

@media (orientation: landscape) {
.infobox {
width: 30% !important;
max-width: 30% !important;
min-width: 30% !important;
}
}
#header-image{
margin-top: 0px !important;
height: 0px;
}
#infobox-div-print{
display: flex;
flex-direction: row-reverse;
}
table.infobox,div.mw-info-column,div#infobox-div-print{
page-break-inside: unset !important;
}
table.infobox-actu {
page-break-inside: avoid !important;
page-break-before: avoid !important;
}
h2,h3, h2 span,h3 span, h2 span:first-child.mw-headline, h3 span:first-child.mw-headline {
page-break-after: avoid !important;
page-break-inside: avoid !important;
}
}

Вот несколько JS, чтобы разместить вещи в нужном месте:
addEventListener("beforeprint", function() {
var UrlImage = $('#header-image2').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
$(".infobox").wrap('');
$("#infobox-div-print").prepend('');
$('#firstHeading').insertBefore('.mw-info-column');
$('#contentSub').insertBefore('#firstHeading');
console.log(UrlImage);
});
addEventListener("afterprint", function() {
$("#header-image-print").remove();
$('#firstHeading').insertBefore('#siteSub');
$('#contentSub').insertBefore('#firstHeading');
$(".infobox").unwrap();

});


Подробнее здесь: https://stackoverflow.com/questions/787 ... la-firefox