CSSのページ番号が機能しない

CSS3の@pageとcounter(page)の機能を試してみましたが、印刷出力にページ番号が追加されていません。私が何をしても、これは単に働いていないように見えます。CSSのページ番号が機能しない

私の骨格は次のようになります。私はこれをテストしてるの方法は、私は、ブラウザでページを開いてPDFファイルにそれを印刷し、最終的に私は確認してるんだということである

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta charset="utf-8"> 
     <style type="text/css"> 
     @page { 
      counter-increment: page; 
      counter-reset: page 1; 
      @top-right { 
       content: "Page " counter(page) " of " counter(pages); 
      } 
     } 
     </style> 
<head> 

<body> 
     <div> 

     Lorem ipsum dolor... 
     /* this gets long, 2 pages of text */ 
     </div> 
</body> 
</html>

内容異なるブラウザでは、出力が少し異なりますが、適切なページ番号は表示されません。

OS：Linuxのミント

ブラウザ：クロム25.0.1364.160は、Firefox 20.0.1、オペラ（パッケージマネージャから最新の）

任意のアイデア？

出典

2013-04-13 ŁukaszBachman

'@ page'宣言の中で' counter-reset：page 1'を取得する必要はありませんか？それ以外の場合は、ページごとにページ番号がリセットされます。 – Juanjo

私はこのスタイルを ''に移しましたが、それは助けになりませんでした。 'top-right'セクションに何も表示されない –

あなたのブラウザがcss3ページをサポートしている場合、ページカウンタは自動的に作成され、インクリメントされます。 – dsas

ブラウザのサポートはこれまでと同じではありません。

@page {margin：2in}は新しいバージョンのFirefoxではサポートされていますが、@ pageの他のパラメータではサポートされていません。私はこれが他のブラウザにも当てはまると信じています。

出典

2013-04-16 02:25:02

これも私の推測ですが、人々はそのようなマークアップを実験することについて書いているので、私は失われています。私は特定のブラウザを使用しても構いませんが、私はnoooooの手掛かりを持っています！ –

私は似たような質問に答えました。[リンク]（http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers/15856287#15856287）役に立つと思う。 –

ジョン・ビドル、自分の投稿を見たことがあります:)あなたは以前に生成されたページカウンターを見ることができました。どのブラウザを使用しましたか？ –

ファイルは次のようになります。ページカウンタは特別なものであり、設定とインクリメントは必要ありません。

Firefox、Webkit、私はオペラもcss3-pagesをサポートしていないと思うので、うまくいきません。 MSDNにもかかわらずIEの新しいバージョンはありません。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta charset="utf-8"> 
     <style type="text/css"> 
     @page { 
      @top-right { 
       content: "Page " counter(page) " of " counter(pages); 
      } 
     } 
     </style> 
<head> 

<body> 
     <div> 

     Lorem ipsum dolor... 
     /* this gets long, 2 pages of text */ 
     </div> 
</body> 
</html>

出典

2013-07-11 14:31:19 dsas

CSSのページ番号が機能しない

答えて

関連する問題