CSS：Flex Box无法在Firefox上打印所有页面 [英] CSS: Flex Box not printing all pages on Firefox

问题描述

我有一个页面，其结构类似于此：

I have a page with a structure similar to this:

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

在CSS中，我包括以下内容：

In the CSS, I include the following:

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

文章通常有很多页。

当我打印或打印预览时，我发现它只给我第一页左右。经过一些试验，我得到了以下解决方案：

When I print or print preview, I find that it only gives me the first page or so. After some experimenting, I have got this solution:

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

也就是说，使用显示：块我可以重新打印所有页面。在这种情况下，可以，因为我不想打印 ，所以不需要 flex 行为，但并非总是如此。

That is, by using display: block I can get all of the pages to print again. In this case, it’s OK, as I don’t want the aside to print, so I don’t need the flex behaviour, but that’s not always the case.

在Safari和Chrome上似乎效果很好。我正在Mac上进行测试。

It seems to work well on Safari and Chrome. I am testing this on a Mac.

为什么在Firefox上不行？

Why doesn’t this work on Firefox?

实际页面可以在以下网址找到： https://www.internotes.net/articles/toggling-attributes。

The actual page can be found at: https://www.internotes.net/articles/toggling-attributes. It’s still in its early stages.

推荐答案

已经研究了一段时间，我仍然不确定Firefox会如何导致打印柔性容器被切断。我在Bugzilla上发现了一些非常古老的错误报告（例如 https://bugzilla.mozilla.org /show_bug.cgi?id=258397 ），但它们与 body 标记上的溢出属性有关。不幸的是，尝试为此调整身体溢出没有任何作用。

Having looked into this for a bit now, I'm still not sure what about Firefox causes printing flex containers to be cut off. I found some extremely old bug reports on Bugzilla (eg. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), but they had something to do with overflow properties on the body tag. Unfortunately, trying to adjust the overflow of body for this does nothing.

我什至去引导4的页面，该页面使用基于flexbox的布局。果然，尝试在Firefox上打印会导致相同的问题。

I even went to Bootstrap 4's page which uses layouts based on flexbox. Sure enough, attempting to print it on Firefox results in the same issue.

最后，甚至 display：inline-block 具有相同的效果。

Finally, even display: inline-block has the same effect.

在我看来，强制 display：block 可以确保Firefox的正常运行正确分页。理想情况下，您用于打印的布局将尽可能简单，以免造成太大的障碍。尽管如此，至少对于我来说，这还是非常令人惊讶的。

It seems to me that forcing display: block on print is what will ensure Firefox paginates correctly. Ideally, the layout you use for printing will be as simple as possible so that this doesn't become too much of a hindrance. Still, it's very surprising, at least to me.

也许某个知识渊博的人可以加入，并告知这是合法的Firefox错误还是只是其设计的一部分哲学。

Perhaps someone with more knowledge can chip in and inform whether this is a legitimate Firefox bug or just a part of their design philosophy.

这篇关于CSS：Flex Box无法在Firefox上打印所有页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！