2014-04-16 33 views
2

我知道这个问题已被问到。但我无法弄清楚我做错了什么。打印html时,我希望在页面的右上角打印页码。CSS HTML页码

这是我的代码,出了什么问题?

<html> 
    <head> 
    <style media="print"> 
    @page { 
     counter-increment: page; 
     counter-reset: page 1; 
     @top-right { 
      content: "Page " counter(page) " of " counter(pages); 
     } 
    } 
    </style> 
    </head> 
    <body> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 
    <div style="height:800px">hello</div> 

    </body> 
</html> 

回答

1

您的问题的答案是特定于您试图使用此CSS规则的浏览器。 @top-right CSS规则看起来像IE8支持的,但没有其他浏览器。

检查出@Page保证金框以获得更多关于此的信息。

1

您不能使用@page作为@alex指出的任何内容。 According to MDN

您只能更改页边距,孤儿,寡妇,和网页的 文档休息。尝试更改任何其他CSS属性将被忽略 。