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

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

我认为这一行:

@page { counter-reset: page 1}

意思是:

“On each printed page, reset the page counter to 1.”

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

因此，每个页面都会有页码 1，因为您要在每个页面上将其重置为 1。

如果您改为执行 body { counter-reset: page 1} 是否有效？ (就像规范中的示例一样。)