web-dev-qa-db-ja.com

CSS：FirefoxでFlex Boxがすべてのページを印刷しない

次のような構造のページがあります。

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

CSSには、次のものを含めます。

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

多くの場合、記事は何ページも長くなります。

印刷またはプレビューを印刷すると、最初のページ程度しか表示されないことがわかりました。いくつかの実験の後、私はこの解決策を手に入れました：

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

つまり、display: blockすべてのページを再度印刷することができます。この場合、asideを印刷したくないので問題ありません。したがって、flexの動作は必要ありませんが、常にそうとは限りません。

SafariとChromeでうまく機能するようです。これをMacでテストしています。

Firefoxでこれが機能しないのはなぜですか？

実際のページは次の場所にあります： https://www.thewebcoder.net/articles/toggling-attributes 。まだ初期段階です。

cssfirefoxprintingflexbox
22
Manngo

これについて少し調べてみたが、Firefoxがflexコンテナの印刷を中断させる原因はまだわかりません。 Bugzillaで非常に古いバグレポートをいくつか見つけました（たとえば https://bugzilla.mozilla.org/show_bug.cgi?id=258397 ）が、bodyのオーバーフロープロパティと関係がありました鬼ごっこ。残念ながら、このためにボディのオーバーフローを調整しようとしても何も起こりません。

私も Bootstrap 4のページ に行き、フレックスボックスに基づくレイアウトを使用しました。案の定、Firefoxで印刷しようとすると同じ問題が発生します。

最後に、display: inline-blockは同じ効果があります。

強制的にdisplay: block印刷時は、Firefoxでページネーションが正しく行われるようにします。理想的には、印刷に使用するレイアウトはできる限り単純で、これが邪魔にならないようにします。それでも、少なくとも私にとっては非常に驚くべきことです。

おそらく、より多くの知識を持っている人が、これが正当なFirefoxのバグなのか、それとも設計哲学の一部なのかを突き止めて通知することができます。

16
Auroratide