首页 > web前端 > css教程 > 正文

css中page-break-after: always;在火狐浏览器上不执行的解决办法

黄舟
发布: 2017-07-08 10:02:20
原创
4027 人浏览过

page-break-after: always;火狐浏览器上不执行

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>分页打印</title>
</head>

<body>
    <object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 ></object>
    <table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="display:table-header-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </td>
           </tr>
        </thead>
        <tbody>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr style=" page-break-after : always;">
                <td>在这个之后分页</td>
                <td>在这个之后分页</td>
           </tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
           <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
           <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
       </tbody>
       <tfoot style="display:table-footer-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
  <div align="center">
       <input type="button" value="打    印" onclick="javascript:window.print()" />
    </div>
</body>
</html>
登录后复制

page-break-after: always;火狐不执行。IE上面却可以。怎么做兼容

1715.png

谷歌对page-break-after的支持有问题,特别是table,需要将数据拆开,用div来做容器

你可以改成这样的结构,通过打印样式来控制,没有问题。。

<!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page{page-break-after: always;page-break-inside: avoid;}
      .hide{display:table-header-group !important}
    </style>
    <style type="text/css">
      .hide{display:none}
    </style>
  </head>
  <body>
    <div class="page"><table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="display:table-header-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </td>
           </tr>
        </thead>
        <tbody>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr>
                <td>在这个之后分页</td>
                <td>在这个之后分页</td>
           </tr>
       </tbody>
       <tfoot style="font-weight:bold" class="hide">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
    </div>
    <div class="page">
      <table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="font-weight:bold" class="hide">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </td>
           </tr>
        </thead>
        <tbody>
            <tr><td>表格内容</td><td>表格内容</td></tr>
           <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
           <tr><td>表格内容</td><td>表格内容</td></tr>
            <tr><td>表格内容</td><td>表格内容</td></tr>
       </tbody>
       <tfoot style="display:table-footer-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table><div align="center">
       <input type="button" value="打    印" onclick="javascript:window.print()" />
    </div>
    </div>

  </body>
</html>
登录后复制

以上是css中page-break-after: always;在火狐浏览器上不执行的解决办法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!