如何使用反增量在打印的网页上显示页码？

Question

我有以下CSS:

@media print {
    div.question-list-footer
    {
        position: fixed;
        bottom: 0;
        padding-left: 180px;
    }
    div.question-list-footer-center 
    {
        text-align: center;
    }
    @page { counter-reset: page 1}
}

#pageNumber:after { content: counter(page); }
#pageNumber { counter-increment: page; }

以及我页面上的以下html:

<div class="question-list-footer">
    <div class="question-list-footer-center">
        <span>Page Number: <span id="pageNumber"></span></span><br/>
        Date: @firstItem.Date.Value.ToShortDateString()
        Id: @firstItem.Id
    </div>
</div>

这在打印时有效,除了所有页面都有"页码1".(IE9,Chrome和FF)我一直盯着这个并且玩了很久但仍然看不出原因.有人有修复吗？ - 请告诉我这不明显.(FWIW - Chrome不喜欢我的底部).

Answer 1

我认为这一行：

\n\n

@page { counter-reset: page 1}\n

\n\n

方法：

\n\n

\n

\xe2\x80\x9c在每个打印页上，将page计数器重置为 1。\xe2\x80\x9d

\n

\n\n

请参阅http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset

\n\n

因此，每个页面的页码为 1，因为您\xe2\x80\x99 在每个页面上将其重置为 1 。

\n\n

如果你这样做的话有效吗body { counter-reset: page 1}？（就像规范中的示例一样。）

\n