CSS: Flex-Box nicht drucken Sie alle Seiten von Firefox
Ich habe eine Seite mit einer Struktur ähnlich zu diesem:
<main>
<section>
<article></article>
<aside></aside>
</section>
</main>
In der CSS habe ich auch die folgende:
main {
display: flex;
flex-direction: row;
}
Ist der Artikel oft viele Seiten lang.
Wenn ich drucken oder seitenansicht, finde ich, dass es nur gibt mir die erste Seite oder so. Nach einigen versuchen, habe ich diese Lösung:
@media print {
aside {
display: none;
}
main {
display: block;
}
}
Ist, durch die Verwendung display: block
ich kann alle Seiten erneut zu drucken. In diesem Fall ist es OK, da ich nicht möchte, dass die aside
zu drucken, so dass ich nicht brauchen, die flex
Verhalten, aber das ist nicht immer der Fall.
Scheint es gut zu funktionieren auf Safari und Chrome. Ich Teste das auf einem Mac.
Warum funktioniert das nicht über Firefox?
Die aktuelle Seite finden Sie unter: https://www.internotes.net/articles/toggling-attributes. Es ist noch in seiner Anfangsphase.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Geschaut zu haben in dieser für ein bisschen jetzt, ich bin noch nicht sicher, was über Firefox bewirkt, dass Druck flex-Container abgeschnitten werden. Ich fand einige extrem alte Bugreports auf Bugzilla (zB. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), aber Sie hatte etwas zu tun mit überlauf Eigenschaften auf die
body
tag. Leider versuchen Sie zum anpassen der überlauf der Körper tut nichts.Ich ging sogar zu Bootstrap-Seite 4, die verwendet layouts basierend auf flexbox. Sicher genug, Sie versuchen, drucken Sie es auf Firefox das gleiche Problem.
Schließlich auch
display: inline-block
hat den gleichen Effekt.Scheint es mir, dass zwingen
display: block
auf Druck ist, was wird dafür sorgen, Firefox paginiert richtig. Im Idealfall ist das layout, das Sie verwenden für den Druck wird so einfach wie möglich, so dass diese nicht zu viel von einem Hindernis sein. Dennoch ist es sehr verwunderlich, zumindest für mich.Vielleicht jemand mit mehr wissen können chip und informieren Sie sich, ob dies eine legitime Firefox-bug oder nur ein Teil Ihrer design-Philosophie.
display: flex
elementdisplay: block
für@media print
gearbeitet aber. Danke.