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

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