Как я могу использовать счетчик приращений, чтобы показать номера страниц на распечатанной веб-странице?

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}

Средства:

«На каждой распечатанной странице сбросьте счетчик page на 1».

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

Следовательно, каждая страница будет иметь страницу № 1, поскольку вы сбрасываете ее до 1 на каждой странице.

Работает ли это, если вместо этого сделать body { counter-reset: page 1}? (Как в примере из спецификации.)

Answer 2

EDIT

Я думаю, что если вы просто удалите это, счетчик не будет сброшен, поэтому он будет просто увеличиваться, как вы хотите

@page { counter-reset: page 1}