css页脚打印的html页面显示不正确

Question

我尝试使用css + html在每个打印页面的底部打印动态页脚。

这是html代码

<div class="footer">"
<p>Footer static message</p>
<p class="pages">Pag: 
    <span id="pagenumber"></span>/
    <span id="pagecount"></span>
</p>
</div>

这是css的相关部分

.pages {
    text-align: "center";
    font-family: "Times New Roman";
    font-size: 9.75pt;
    color: #000000;
}

.footer {
    position: running(footer);
    text-align: left;
    font-family: "Times New Roman";
    font-size: 9.75pt;
    color: #A0A0A0;
    padding-bottom: 20px;
}

@page { 
    @bottom-center { content:element(footer);}
}

#pagenumber:before {
    content: counter(page);
}
#pagecount:before {
    content: counter(pages);
}

＆＃34; 页脚静态消息＆＃34;打印正确，但页面计数器大多是从页面切除，我只能看到它的顶部。如何更改 css 以便打印的页脚位于底部边距内？

更新

我通过使用div而不是p标签来解决问题，css没有改变。

<div class="footer">"
<div>Footer static message</div>
<div class="pages">Pag: 
    <span id="pagenumber"></span>/
    <span id="pagecount"></span>
</div>
</div>