Question

我正在为网站打印友好的CSS。它在IE中完美预览/打印，但Firefox（版本3.6）仅预览/打印第一页。

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

感谢。

修改

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

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

看起来打印只是糟透了FF。客户不愿意听到 - 希望他们不使用FF！

Answer 1

我刚发现，来自

的元素

display:inline-block;

仅打印第一页并隐藏其他页面。将此设置为

display:block;

在我的案例中，

是解决方案。

Answer 2

如果您不想浏览所有代码，这是我发现的唯一可以帮助我而不会弄乱我所有其他CSS的内容：

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

Answer 3

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

Answer 4

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

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

Answer 5

我遇到了同样的问题，因为height的{{1}}设置为body，在我100%中修改为height: auto之后，它就有效了。

print.css

Answer 6

{3}已在Firefox 3中修复。

在long-standing bug with printing absolutely-positioned elements中跟踪缺少页面的问题（查看“依赖于”列表）。您尝试打印的页面上是否有框架或长桌？

是的，在Firefox中打印的资源不足，抱歉你必须处理它......

Answer 7

经过大量的研究和试验错误，我发现{A}分开了this article。我持怀疑态度，因为它已经很老了，但它说明了：

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

因为我有一个大的浮动容器，我想我会尝试一下。所以，我从其他答案和本文中做了一个混合，并提出了这个：

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

这种混合对我有用！我很高兴我以为我会分享:)。

Answer 8

对我来说（引导程序4）的解决方案是

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

Answer 9

如果您无法克服Firefox的打印限制，您可以将页面转换为PDF。如果您选择了该选项，Prince XML是我强烈推荐的库。它有非常好的CSS支持，包括打印介质。

Answer 10

以下对我有用。

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

Answer 11

Firefox肯定不会在任何方面吮吸。但是，有时它比其他浏览器更严格地遵守标准。无论如何，为了切入追逐，我遇到了同样的问题，即firefox正在打印（也预览）多页报告的前2页，用长表构建，由我的网页制作。经过一些调试后，我发现我已将大部分报告的内容包含在一个span元素中，其样式为{display：inline-block;}等。一旦我删除了那个分页就完美了......

Answer 12

我遇到了同样的问题，我将$ python3 --version Python 3.4.3的位置从position:relative替换为position: absolute，从顶部div到底部。

Answer 13

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

然后我碰巧在Firefox的打印预览屏幕顶部注意到一个名为 简化页面 的复选框：

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

我不确定这是多么广泛适用于YMMV，但它值得一试！到目前为止，我还没有找到适合Chrome的解决方案（版本65.0.3325.162（官方版本）（64位））。

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

Answer 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>

Answer 15

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

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

此外，刚刚在2020年7月发布的V78.0.2似乎已解决了该问题。

Answer 16

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

Firefox只打印第1页

16 个答案: