web-dev-qa-db-fra.com

CSS: Flex Box n'imprime pas toutes les pages sur Firefox

J'ai une page avec une structure similaire à celle-ci:

<main>
    <section>
        <article></article>
        <aside></aside>
    </section>
</main>

Dans le CSS, j'inclus les éléments suivants:

main {
    display: flex;
    flex-direction: row;
}

L'article fait souvent plusieurs pages.

Lorsque j'imprime ou imprime un aperçu, je trouve que cela ne me donne que la première page ou plus. Après quelques expérimentations, j'ai obtenu cette solution:

@media print {
    aside {
        display: none;
    }
    main {
        display: block;
    }
}

Autrement dit, en utilisant display: block Je peux réimprimer toutes les pages. Dans ce cas, c'est OK, comme je ne veux pas que le aside s'imprime, donc je n'ai pas besoin du comportement flex, mais ce n'est pas toujours le cas.

Il semble bien fonctionner sur Safari et Chrome. Je teste cela sur un Mac.

Pourquoi cela ne fonctionne-t-il pas sur Firefox?

La page réelle peut être trouvée à: https://www.thewebcoder.net/articles/toggling-attributes . C'est encore à ses débuts.

cssfirefoxprintingflexbox
22
Manngo

Après avoir examiné cela un peu maintenant, je ne sais toujours pas ce qui se passe avec Firefox qui provoque l'impression des conteneurs flexibles. J'ai trouvé des rapports de bogues extrêmement anciens sur Bugzilla (par exemple https://bugzilla.mozilla.org/show_bug.cgi?id=258397 ), mais ils avaient quelque chose à voir avec les propriétés de débordement sur le body tag. Malheureusement, essayer d'ajuster le débordement du corps pour cela ne fait rien.

Je suis même allé à page de Bootstrap 4 qui utilise des mises en page basées sur flexbox. Effectivement, tenter de l'imprimer sur Firefox entraîne le même problème.

Enfin, même display: inline-block a le même effet.

Il me semble que forcer display: block lors de l'impression est ce qui garantira que Firefox pagine correctement. Idéalement, la mise en page que vous utilisez pour l'impression sera aussi simple que possible afin que cela ne devienne pas trop un obstacle. Pourtant, c'est très surprenant, du moins pour moi.

Peut-être que quelqu'un avec plus de connaissances peut intervenir et indiquer s'il s'agit d'un bogue légitime de Firefox ou simplement d'une partie de sa philosophie de conception.

16
Auroratide