15

完全なフィドルを参照: http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}

上記のルールにより、最初の印刷ページに特定の余白があり、他のすべてのページに 1 インチの余白があると思います。

代わりに、Chrome の印刷プレビューで次のように表示されます (印刷出力に正確です)。最初のページ以外の余白は異なりますが、正しくありません。ルールをコメントアウトすると、:first margin最初のページ以外を正しいレイアウトで印刷できますが、もちろん最初のページも影響を受けます。

Mozilla のドキュメントは、Chrome がこれを適切にサポートしていると主張しているように思えます。そして明らかに Chrome は反応しますが、正しくはありません。できれば Chrome のドキュメントを参照したいのですが、Google はドキュメントが苦手です。( MDNに相当する Google はありますか? 見つかりません。)

Chrome がバージョン 2.0 からこれをサポートしていたはずで、印刷レイアウトが非常に大きな PITA である場合、この問題について他の場所で言及されていないのは奇妙です。

私はそれを間違っていますか？強力な回避策はありますか? @page:firstマージン値を個別に trbl スタイルと個別に設定して (スペースなしで)試し、スタイル宣言のルールの順序を入れ替えました。無効。

ここに画像の説明を入力

4

2 に答える 2

11

あなたは次のように述べました：

Mozilla のドキュメントは、Chrome がこれを適切にサポートしていると主張しているように思えます。

確かに、:firstCSS 疑似クラスは Chrome からの不明なサポートを示しています (「不明なサポートです。これを更新してください。」

また、Chrome には多くの印刷プレビューの問題があり、この問題と似たような問題に出くわしました。それにもかかわらず、私は回避策を見つけることができませんでした。私が試したあなた自身のテストであなたが気づいているように：

  • 負のマージン
  • マージンではなくパディング
  • 余白をシミュレートするための大きな境界線
  • 改ページの強制(ハックによる解決策の可能性)
  • 明示的widthかつheight
  • !important

多くのテストを実行したところ、Chrome はプレビュー PDF ファイルを生成するときに CSS ルールを無視するか、不適切に実装しているようです。個人的には、私のテスト結果から、これはバグだと思います。

アップデート

  • Firefox v17.0.1 -@pageルールをまったく適用しません。
  • Chrome 23.0.1271.97 m -:firstすべてのページに疑似クラスが誤って適用されます。
  • IE 9.0.8112.16421 - Chrome と同じルールの誤用を行う

私の調査結果は、疑似クラス ページのブラウザー互換性チャート:firstと一致しています。つまり、Chrome の互換性は不明であり、Firefox の互換性は「サポートされていません」です。私は IE8 をテストできませんでしたが、IE9 での私のテストはチャートの主張をサポートしていません。Microsoft の例でさえ、正しくレンダリングできません ( CSS のハウツー: CSS を使用して印刷用にページを最適化する)。

:最初のブラウザの互換性

@pageさらにテストを重ねた結果、ほとんどのブラウザーに完全に統合されていないと結論付けることができました。仕様は存在します ( CSS3 の新しい仕様があります@page) が、私たちのテスト、記事でのテスト済みの例の欠如、およびバグ レポートに基づくと、スタイリングのより柔軟な仕様をうまく使用できないようです。.

于 2012-12-23T03:48:32.160 に答える