如何在打印页面上插入页码

时间:2016-08-12 09:28:49

标签: javascript html css

我想只在打印页面上显示页码。我已经编写了css计数器来完成这项工作,但这仅适用于Firefox,但不适用于Chrome和IE。

<!DOCTYPE html>
<html>
    <head>
        <style>
           .footer{
                display:none;
            }
            body{
                counter-reset:page;
            }
            @media print{

                div.footer{
                    display:table-footer-group;
                    position:fixed;
                    bottom:0pt;
                    right:0pt;
                }
                div.footer:after{
                    counter-increment:page;
                    content:counter(page);
                }
            }
        </style>
    </head>
    <body>
        <h1>HTML tutorials:</h1>
        <h2>HTML Tutorial</h2>
        <h2>CSS Tutorial</h2>

        <h1>Scripting tutorials:</h1>
        <h2>JavaScript</h2>
        <h2>VBScript</h2>

        <h1>XML tutorials:</h1>
        <h2>XML</h2>
        <h2>XSL</h2>

        <h1>HTML tutorials:</h1>
        <h2>HTML Tutorial</h2>
        <h2>CSS Tutorial</h2>

        <h1>Scripting tutorials:</h1>
        <h2>JavaScript</h2>
        <h2>VBScript</h2>

        <h1>XML tutorials:</h1>
        <h2>XML</h2>
        <h2>XSL</h2>

        <h1>HTML tutorials:</h1>
        <h2>HTML Tutorial</h2>
        <h2>CSS Tutorial</h2>

        <h1>Scripting tutorials:</h1>
        <h2>JavaScript</h2>
        <h2>VBScript</h2>

        <h1>XML tutorials:</h1>
        <h2>XML</h2>
        <h2>XSL</h2>
        <div class="footer">Page </div>
    </body>
</html>

在Chrome和IE浏览器中显示哪些其他选项?

0 个答案:

没有答案