Firefox印刷のみ第1ページ

Question

私はウェブサイトの印刷用のCSSに取り組んでいます。それはIEで完全にプレビュー/印刷しますが、Firefox（バージョン3.6）は最初のページをプレビュー/印刷するだけです。

誰もが一般的にこれを引き起こしていることを認識していますか？マークアップはかなり複雑なので、どこから始めたらいいのかわかりません！

ありがとうございました。

編集

このソリューションは、事態が悪化しました。

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

印刷がちょうどFFで吸うように見えます。クライアントはそれを聞きたくありません - うまくいけば彼らはFFを使用しないでください！

Answer 1

long-standing bug with printing absolutely-positioned elementsが（リスト「に依存」に目を通す）欠落しているページに問題がbug 521204で追跡されているのFirefox 3で

を修正しました。印刷しようとしているページにフレームや長い表がありますか？

そして、はい、Firefoxで印刷が下の所有で、申し訳ありませんあなたはそれに対処する必要が...

Answer 2

あなたは印刷上のFirefoxの制限を克服することができない場合は、PDFにページを変換することができます。あなたがそのオプションのためになっているなら、Prince XMLは私が強く推薦する図書館です。それは印刷媒体を含む非常に良いCSSサポートを持っています。

Answer 3

Firefoxは確かにどんな面でも吸うわけではありません。ただし、他のブラウザよりも厳密に標準に準拠していることがあります。とにかく、私は同じ問題を抱えていました。つまり、firefoxは、私のウェブページで作成された長いテーブルで構築された複数ページのレポートの最初の2ページだけを印刷していました（プレビューも）。いくつかのデバッグの後、レポートの内容の大部分を{display：inline-block;}というスタイルのスパン要素に含めていることがわかりました。できるだけ早く私は、ページネーションは完璧だったこと取り除かよう...

Answer 4

私はちょうど見つけた、

display:inline-block; 

を持つ要素から最初のページだけを印刷し、他のeverthingが隠されていること。これを

display:block; 

に設定してください。

Answer 5

私は同じ問題を抱えていました。ルートタグにはdisplay: flexがあることが判明しました。これをdisplay: blockに変更すると、残りのコンテンツが表示されます。あなたのDOMツリーに行って、すべてのdisplay属性をチェックすることをお勧めします。私が試した

@media print { 
    body { 
    overflow: visible !important; 
    } 
} 

Answer 6

あなたのコードのすべてを通過したくない場合は、これは私の他のCSSのすべてを台無しにすることなく、私の作品、私が見つけた唯一のものです十本のための修正と、最後に、私は必要なすべてをした

@media print { 
    body { 
    display: block; 
    } 
} 

Answer 7

：

Answer 8

私は私のprint.cssにheight: autoに変更した後bodyのheightは、100%に設定されているので、私は同じ問題を持っていた、それが働きました。研究と臨床試験&エラーの多くの後

@media print { 
    body { 
    height: auto; 
    } 
} 

Answer 9

、私は離れて、リストでthis articleを発見しました。

フロートされた要素が印刷されたページの下を通過すると、残りのフロートは効果的に消えます。次のページには印刷されませんページ。

大きな浮遊容器があるので、私はそれを試してみると思いました。だから、私は他の回答と、この記事からミックスを作り、これを思い付いた：

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
} 

/*this is because I use angular and have this particular layout*/ 
body > .fade-ng-cloak { 
    height: 100%; 
    display: block; 
    flex: none; 
    float: none; 
} 
.l-content, 
.l-sidebar { 
    float: none; 
} 

だから、基本的には：

1. がdisplay: blockへのラッパーとして動作要素を設定overflow: visible
2. に身体を設定します、
3. が長いコンテナにfloatを排除し、すべてのflexスタイルを排除し、必要に応じて高さをリセット

そのミックスは私のために働いた！私は、私は同じ問題を持っていたと私は上から下へのdivからheight: 100%でposition: absoluteへposition:relativeから位置を置き換え:)

Answer 10

を共有したいと思ったのでうれしいです。