Firefox 只打印第一页并剪切右边的页面答案

【问题标题】：Firefox prints only first page and cuts the page on the rightFirefox 只打印第一页并剪切右边的页面
【发布时间】：2012-11-09 23:38:40
【问题描述】：

我在从 Firefox 打印时遇到了很大的麻烦（任何版本，我的是 16.0.2，但即使是 Aurora 开发版本也是如此）。打印页面时，缩小以适合打印预览不起作用。唯一的方法是，如何使页面适合纸张是在同一对话框中选择缩放 70%。其他问题：它只打印第一页。怎么办？

【问题讨论】：

标签： css firefox printing overflow

【解决方案1】：

我需要调整 CSS 文件以进行打印，所以我做了一个。它可以在任何地方完美运行，但不能在 Firefox 中运行。出了什么问题？

首先，我尝试在 print.css 文件中为 BODY 和 HTML 指定宽度和高度。比边距等。

后来我发现问题出在哪里：标准 CSS 文件中包含以下内容：

body {
 ...
 overflow-x: hidden;
 overflow-y: scroll;
}

所以我在 print.css 文件中添加了以下内容：

body {
 overflow-x: visible;
 overflow-y: visible;
}

我猜，如果你只在 CSS 中指定了溢出，而不是 -x 和 -y，那么你只需要在 print.css 文件中指定溢出：可见。

从 Firefox 打印现在可以正常工作了。我只是想，这可能会对在 Firefox 中发生奇怪打印行为的人有所帮助。

【讨论】：

【解决方案2】：

除了Kokesh的回答，还有一些时间属性

display: table

也会产生这个问题。因此，您需要将其更改为“阻止”或其他适合您要求的内容。

【讨论】：

【解决方案3】：

我尝试了其他答案中建议的修复，但它们并没有为我解决问题。经过大量研究和反复试验，我发现this article by A list 是分开的。我对此表示怀疑，因为它太旧了，但它指出：

如果浮动元素超出了打印页面的底部，则浮动的其余部分将有效地消失，因为它不会在下一页上打印。

因为我有一个大的浮动容器，我想我会试一试。所以，我综合了其他答案和这篇文章，得出了这个结论：

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

所以基本上：

将正文设置为overflow: visible
将充当包装器的元素设置为display: block，消除所有flex 样式并在必要时重置高度
消除长容器上的float

这种组合对我有用！我很高兴我想我会分享:)

【讨论】：