在不同的浏览器中实现一致的分页符

Question

我目前正在为一个项目生成一些在线报表，这些报表需要能够以一致的格式打印出来。报告的内容使用PHP生成，并在实际浏览器中正常工作。不幸的是，令人生气的是，一旦我尝试打印，所有的投注都关闭。

我已将内容组织到一系列表中，并且我试图使用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; 
} 

然而，浏览器兼容性导致我头痛不已：

• 火狐显示一切完美，打印出来没有我ssue。不幸的是，Firefox对于标准机器的公司政策是不允许的。
• Chrome只是完全忽略了page-break-inside和page-break-after属性，并在任何感觉的地方插入分页符。
• IE 11是公司的标准浏览器，它可以识别页面中断标签，但是如果表格/行/单元格的内容跨越多页（当人们尝试复制时粘贴在整个电子邮件中）。无论什么时候它穿过一个，它都会在表格前面添加一个额外的空白页面。

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