Firefox 只打印第一页答案

【问题标题】：Firefox printing only 1st pageFirefox 只打印第一页
【发布时间】：2011-06-04 06:52:24
【问题描述】：

我正在为一个网站开发适合打印的 CSS。它在 IE 中完美预览/打印，但 Firefox（3.6 版）仅预览/打印第一页。

是否有人知道通常会导致这种情况的任何事情？标记相当复杂，所以我不知道从哪里开始！

谢谢。

编辑

这个解决方案只会让事情变得更糟。

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

看起来打印在 FF 中很糟糕。客户不会喜欢听到这些 - 希望他们不要使用 FF！

【问题讨论】：

绝对定位有时会破坏分页。
@Pekka - 任何元素（甚至是隐藏元素）的绝对定位，或者只是要打印的内容？
要打印的内容。 position: absolute 将元素从布局流中取出，我认为这就是您链接问题的 OP 存在问题的原因。现场演示会有所帮助
不，没有定位。在所有可打印的东西上都尝试过 position:static 。很遗憾，我无法为您提供预览，因为它在发布前已锁定特定 IP。

标签： firefox printing

【解决方案1】：

我刚刚发现，来自一个带有

的元素

display:inline-block;

只打印第一页，隐藏其他所有内容。将此设置为

display:block;

在我的情况下是解决方案。

【讨论】：

感谢您的提示。与您类似，我将 DIV 设置为 display: table。我创建了一个打印样式表，将其设置为display: block，问题就解决了！

【解决方案2】：

我遇到了同样的问题。原来，根标签上有display: flex。将其更改为display: block 后，将显示其余内容。我建议您向上查看 DOM 树并检查每个 display 属性。

【讨论】：

Flex 在 FF 44.0.2 中仍然是一个问题。还注意到我的page-break-inside 和page-break-after 避免在我将flex 换成block 后突然正常工作，这些被FF 忽略。
Ionic <ion-split-pane> 是我的 flex 罪魁祸首，除了 forum.ionicframework.com/t/… 和需要 !important
display: flex 仍然是一个问题，4 年后。 FF 60.9.0esr
现在 6 年过去了，但问题仍然是最新的 Firefox 版本。现在在 print css 中将我的 body 元素设置为 display: block，它工作正常。

【解决方案3】：

如果您不想检查所有代码，这是我发现的唯一一个对我有用且不会弄乱我所有其他 CSS 的方法：

@media print {
  body {
    overflow: visible !important;
  }
}

【讨论】：

【解决方案4】：

我为此尝试了十几个修复程序，最后，我只需要：

@media print {
  body {
    display: block;
  }
}

【讨论】：

我还必须添加相对于身体的位置才能让它工作！

【解决方案5】：

我遇到了同样的问题，因为body 的height 设置为100%，在我在print.css 中修改为height: auto 后，它起作用了。

@media print {
  body {
    height: auto;
  }
}

【讨论】：

【解决方案6】：

对我来说（bootstrap 4）解决方案是

@media print {
    .row {
      display: block;
    }
}

【讨论】：

这可能不是理想的解决方案，但您可以将 class="row d-print-block" 添加到导致问题的行中 - 所以您不会覆盖所有 .row
修改了答案@Naderio

【解决方案7】：

long-standing bug with printing absolutely-positioned elements 已在 Firefox 3 中修复。

在bug 521204 中跟踪缺少页面的问题（查看“取决于”列表）。您尝试打印的页面上是否有框架或长表格？

是的，在 Firefox 中打印的所有权不足，很抱歉您必须处理它...

【讨论】：

不，没有框架或长桌。只是简单的旧内容！
@ScottE：对不起，那不知道。如果我必须弄清楚，我会将页面减少到尽可能小的测试用例，以找出导致问题的原因 developer.mozilla.org/en/Reducing_testcases>

【解决方案8】：

经过大量研究和反复试验，我发现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

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

【讨论】：

【解决方案9】：

如果您无法克服 Firefox 的打印限制，您可以将页面转换为 PDF。如果您愿意，Prince XML 是我强烈推荐的库。它有很好的 CSS 支持，包括印刷媒体。

【讨论】：

有趣的选项。我有没有提到这是一个共享点站点？我只能想象它发出的垃圾标记会发生什么。
呃...我不建议将其用于 Sharepoint 网站，哈哈。

【解决方案10】：

我尝试按照this answer 中的建议将@media print 作为style 定义添加到页面的<body> 元素，但Firefox（60.0（64 位）、Windows 7 64/Pro）仍然截断打印输出网站只到首页。

然后我碰巧注意到 Firefox 的打印预览屏幕顶部有一个标题为 Simplify Page 的复选框：

当我选中此框时，Firefox 删除了一些样式，但打印预览屏幕刷新以包含网站中的所有页面！

我不确定这是否适用于 YMMV，但值得一试！到目前为止，我还没有找到适用于 Chrome 的类似解决方案（版本 65.0.3325.162（官方构建）（64 位））。

PS：根据进一步的经验，我发现 Simplify Page 不仅删除了样式，还删除了一些完整的元素，例如示例代码部分，因此请务必仔细查看结果打印前。

【讨论】：

【解决方案11】：

以下对我有用。

@media print {
  .field--body table tr {
    display: table-row-group !important;
  }
}

【讨论】：

【解决方案12】：

Firefox 在任何方面都绝对不烂。但是，有时它比其他浏览器更严格地遵守标准。无论如何，切入正题，我遇到了同样的问题，即 Firefox 仅打印（也预览）多页报告的前 2 页，该报告由我的网页生成，由长表构建。经过一些调试后，我发现我已将报告的大部分内容包含在具有 {display: inline-block;} 样式的 span 元素中。一旦我删除了分页是完美的......

【讨论】：

不是吗？我强烈建议您打开 Firefox 的设置界面。 ;} 只是开玩笑。对长报告的人的另一个修复：你可能把它全部放在一个向左浮动的 div 中，例如 1000px 的宽度。这可能是由于桌子的容器。先检查一下。
“但是，有时它比其他浏览器更严格地遵守标准。” - 不幸的是，有时候，那就是“糟透了”。

【解决方案13】：

我遇到了同样的问题，我将位置从 position:relative 替换为 position: absolute 与 height: 100% 从顶部 div 到底部。

【讨论】：

【解决方案14】：

对我有用的是为绝对元素容器添加一个非零的上边距，正如 David Earl 在这里写道 https://bugzilla.mozilla.org/show_bug.cgi?id=267029

这样

<html>
  <head>
    <style>
@page {
    size: A4 portrait;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif;
}
.page {
    position: relative;
    width: 209mm;
    height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
                      the physical page otherwise  */
    overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 36pt;
  color: black;
}
@media print {
    .page {
        page-break-before: always;
        /* uncomment these lines and it works... 
        margin-top: 1px;
        top: -1px;
        */
          /* nudge back up to compensate for margin */
    }
    .page:first-child {
        page-break-before: avoid;
    }
}
    </style>
  </head>
  <body>
    <div class="page pagea">
        <div class="content">Page 1</div>
    </div>
    <div class="page pageb">
        <div class="content">Page 2</div>
    </div>
  </body>
</html>

【讨论】：

【解决方案15】：

我在使用 Firefox V77 时遇到了类似的问题。它只会打印可见页面的第一部分，并会在预览模式和打印模式下切断其余部分。

我发现的一个解决方法是在您的打印样式表中将 flex 更改为 block。

另外，2020 年 7 月刚刚发布的 V78.0.2 似乎已经解决了这个问题。

【讨论】：

【解决方案16】：

如果ReactJS 中存在的最外层root 父元素为height:min-content 或长于height:100vh，浏览器似乎会添加滚动条。然后，它肯定会（如果不是唯一的方法）从浏览器的对话框中打印。对我来说，让root 滚动children 和overflow 不会让我打印position:absolute 可滚动子项，除非使用自定义按钮而不是浏览器的打印对话框进行打印。

【讨论】：