Firefox 仅打印第一页并剪切右侧页面

Question

等等等等，吸它OPEN AI。

显然我需要更多角色......

Answer 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中只指定了overflow，而不是-x和-y，那么你只需要在print.css文件中指定overflow:visible。

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

Answer 2

除了Kokesh的回答之外，有时属性

display: table

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

Answer 3

我尝试了其他答案中建议的修复方法，但它们没有为我解决问题。经过大量的研究和反复试验，我通过 A 列表找到了这篇文章。我很怀疑，因为它太旧了，但它指出：

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

因为我有一个大的漂浮容器，我想我应该尝试一下。因此，我将其他答案和本文结合起来，得出了这个：

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;
}

所以基本上：

1. 将主体设置为

   overflow: visible

2. 将充当包装器的元素设置为

   display: block

   ，消除所有

   flex

   样式并在必要时重置高度
3. 消除长容器上的

   float

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