在不同的浏览器中强制执行一致的分页符

Question

我目前正在为一个项目制作一些在线报告，这些报告需要能够以一致的格式打印出来。报告的内容是使用 PHP 生成的，并且在实际浏览器中可以正常工作。不幸的是，一旦我尝试打印，所有的赌注都被取消了。

我已将内容组织成一系列表格，并尝试使用 page-break-inside 和 page-break-after CSS 属性来控制报表的打印外观。这样做的目的是，仅当报告项的内容太长而无法放在单个页面上时，才应将其分页。

大大简化了，我的页面结构大致如下：

<div class="body-block">    
    <div class="inner-block">
        <div class="report-block">
            <div class="report-entry">
                <table>
                    <tr>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                </table>
            </div>
            <div class="report-entry">
                <table>
                    <tr>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

页面的（简化的）CSS 如下所示：

.body-block {
    display: block;
    min-width: 700px;
    min-height: 100%;
    margin: 0 auto;
}

.inner-block {
    width: 700px;
    min-height: 100px;
    margin: 18px 0 10px 0;
    float: left;
}

.report-block {
    margin-bottom: 50px;
    page-break-after: always;
}

.report-entry table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 2px solid #333;
    page-break-after: auto;
    page-break-inside: avoid;
}

.report-entry td, .report-entry th {
    page-break-inside: avoid;
    page-break-after: avoid;
}

但是，浏览器兼容性让我头疼不已：

• Firefox 可以完美显示所有内容，并且可以毫无问题地打印出来。很遗憾，标准机器的公司政策不允许使用 Firefox。
• Chrome 完全忽略 page-break-inside 和 page-break-after 属性，并在任何需要的地方插入分页符。
• 公司标准浏览器 IE 11 可以识别 page-break-inside 标记，但如果表格/行/单元格的内容跨越多个页面（当人们尝试复制粘贴时会发生这种情况），则会完全混乱在整个电子邮件中）。每当它遇到一个时，它都会在表格之前抛出一个额外的空白页。

This JSFiddle 展示了这个问题。 here 提供了可打印版本的直接链接，但由于某种原因似乎无法在 IE 上运行。

如何让 Chrome 或 IE (11) 与我合作并正确处理分页符？

Answer 1

要修复浏览器差异，您应该使用 reser.css 或 normalize.css

参考CSS reset - What exactly does it do?

参考Firefox/IE Padding/Margin Fix

参考How do I fix CSS padding issues between Firefox & Chrome?

试试这个修复

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
tr {
   page-break-inside: initial;
   page-break-after: always;
   page-break-inside: auto;
}
td {
   page-break-inside: initial;
   page-break-after: always;
   page-break-inside: auto;
}
</style>

尝试 page-break-inside: auto|avoid|initial|inherit;

的所有可能值

也可以试试<br> and ::after or ::before