Firefox 打印额外的空白页答案

【问题标题】：Firefox prints extra blank pageFirefox 打印额外的空白页
【发布时间】：2022-01-19 09:33:25
【问题描述】：

我的网页可以在 Chrome、Safari 和 IE 上正确打印，但在 Firefox 上出现以下问题：

它只在第一页打印页眉。其余部分为空白。实际内容仅在第 2 页显示。

谷歌搜索了一下，我发现“float:left”样式导致了它。如果我删除“float：left”，它打印正常，但它看起来不像它应该的那样，因为它需要在打印和屏幕上显示彼此并排的 2 列。

这个问题有解决办法吗？

谢谢。

【问题讨论】：

【解决方案1】：

您好，我遇到了类似的问题，但打印时我在 END 处多了一个空白页。 IE 也会做同样的事情，所以我认为我遇到了 CSS 问题。

长话短说，我发现如果你有一个段落作为正文元素中的第一个元素，并且该段落在 CSS 中设置了 'margin' 属性，它会在最后打印一个空白页。有趣的是，如果只有一页，它只会打印空白页。如果我从样式中删除了边距或在段落之前添加了一个元素，它不会打印额外的空白页。

JAB

【讨论】：

【解决方案2】：

我发现将 HTML 中的页面高度设置为比打印机页面高度中指示的小一点可以防止出现空白页问题。

【讨论】：

【解决方案3】：

尝试使用打印样式表：

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

在此样式表中，您将能够删除 float:left 以进行打印，而不会影响浏览器中的布局。

阿尔

【讨论】：

【解决方案4】：

Firefox 中多余的空白页也可能是由于使用了display: flex 和min-height: 100vh 造成的，我曾用它们来创建粘性页脚。

要修复，只需添加打印样式设置display: block 和min-height: 100%。

【讨论】：

【解决方案5】：

有确切的问题 - 标题后跟空白页或半页。如果您的布局严重依赖表格，则可能是 vertical-align 规则设置为除 middle 或 baseline 之外的任何内容。

将规则设置为中间，如图所示修复它

@media print {
    table tr td {
        vertical-align: middle;
    }
}

【讨论】：

【解决方案6】：

我的内容在表格中，这解决了问题。

tr { page-break-inside: avoid; }

【讨论】：

【解决方案7】：

经过多次尝试，我发现如果你有page-break-after: always;，如果你将它应用到最后一个元素，Firefox 会在最后显示一个空白页面。您可以使用 :not(:last-child) 之类的东西来防止它。

【讨论】：

【解决方案8】：

我还有一个空白页作为我的第一页。我通过使用解决了这个问题：

position: absolute;
top:0;

这会将内容强制到打印的第一页的顶部（您需要将其应用到任何您希望位于第一页顶部的内容）。我正在使用tailwind css，并且在我的所有其他布局项目上都有 print:hidden 类。（如导航和页脚）

@media print {
    .print\:hidden {
        display: none;
    }
}

我认为问题是从切换到打印模式的工件留在某处。当我在 Firefox 开发工具中切换到打印模拟器时，它上面没有任何东西可以看到盒子模型，所以我被难住了。幸运的是，上面的创可贴解决方案很有效。

希望能够找出根本问题......

【讨论】：