报告 HTML + CSS + 打印 - Chrome 错误答案

【问题标题】：Report HTML + CSS + Print - Chrome bug报告 HTML + CSS + 打印 - Chrome 错误
【发布时间】：2013-02-18 17:20:03
【问题描述】：

我正在尝试用 HTML + CSS 制作报告。我的模板包含页眉、内容和页脚。我想在所有页面中重复页眉和页脚，作为基础报告。

我的 CSS 看起来像这样：

标题：

@media print {
 div.report-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
}

页脚：

@media print {
  div.report-header {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
 }

可能的错误是，在 Firefox 上，报告工作正常，在所有页面中重复页眉和页脚，但在 Chrome 中，页眉只出现在第一页，页脚只出现在最后一页。

我尝试了很多教程，包括使用表格：

@media print {
  thead { display: table-header-group; width: 100%; background: red;}
  tfoot { display: table-footer-group; width: 100%; background: green;}
}

但结果是一样的，Firefox 工作正常，而 Chrome 不工作。请问，我能做些什么来做这个简单的报告？有没有插件可以做这样的事情？

我使用的是 Chrome 版本 24.0.1312.70。

【问题讨论】：

我迟到了一年。我在使用 @media print CSS 在 Chrome 中打印 DIV 时遇到了类似的问题。这在 Chrome 32 中仍然是一个问题。我想知道这是否与 Chrome 呈现其打印预览屏幕的方式有关 - 我认为它可能依赖于它的 Chrome PDF 查看器插件。

标签： html css printing report css-tables

【解决方案1】：

如果我没记错的话，这只适用于 Firefox、Opera 和 IE。

【讨论】：