Question

我有一个结构与此类似的页面：

<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。它还处于早期阶段。

Answer 1

现在对此进行了一些研究，我仍然不确定Firefox会导致打印弹性容器被切断。我在Bugzilla上发现了一些非常古老的bug报告（例如https://bugzilla.mozilla.org/show_bug.cgi?id=258397），但它们与body标记上的溢出属性有关。不幸的是，试图调整身体的溢出对此无效。

我甚至去了Bootstrap 4's page，它使用了基于flexbox的布局。果然，尝试在Firefox上打印它会导致同样的问题。

最后，即使display: inline-block也有同样的效果。

在我看来，强制display: block打印是确保Firefox正确分页的原因。理想情况下，用于打印的布局将尽可能简单，这样就不会成为太多的障碍。不过，至少对我而言，这是非常令人惊讶的。

也许拥有更多知识的人可以填写并告知这是一个合法的Firefox错误还是仅仅是他们设计理念的一部分。

Answer 2

错误尚未修复：https://bugzilla.mozilla.org/show_bug.cgi?id=939897

不幸的是，由于var pythonExePath = GetPythonExePath(); if (pythonExePath!=null) { var pythonFile = Path.Combine(SelectProjectFolder.Content.ToString(), "main.py"); Process.Start("cmd.exe", $"/K {pythonExePath} {pythonFile}"); }，我似乎遇到了同样的问题。这是站点：https://cv.l3x.in

在macOs 10.14.6上，它可以在Chrome和Safari中正常打印，在Firefox 72.0上，它会在第一页分页符处截断“工作经验”部分，跳至未排序列表中的下一项。

在没有任何CSS Grid的情况下呈现的相同内容可以正确打印：https://cv.l3x.in/work

虽然可以使用相同的快速解决方法，即将display: grid替换为display: grid

CSS：Flex Box不会在Firefox上打印所有页面

2 个答案: