2011-01-05 14 views
26

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

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

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

編集

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

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

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

+0

絶対配置ではページ区切りが壊れることがあります。 –

+0

@Pekka - 任意の要素(隠された要素を含む)の絶対配置、または印刷される内容のみ? – ScottE

+0

が印刷されます。 'position:absolute'はレイアウトフローから要素を取り除くので、リンクされた質問のOPに問題があるのはなぜかと思います。ライブデモが役に立ちます –

答えて

3

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

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

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

+0

いいえ、フレームもロングテーブルもありません。ただ普通の古いコンテンツ! – ScottE

+0

@ScottE:申し訳ありませんが、分かりません。もし私がそれを理解しなければならなかった場合、私は問題を引き起こす原因を理解するためにできるだけ小さなテストケースにページを縮小したい Nickolay

1

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

+0

興味深いオプション。これはシェアポイントサイトだと言いましたか?私はそれが放出するガーベッジ・マークアップに何が起こるか想像できるだけです。 – ScottE

+0

ええと...私はSharepointサイトではこれをお勧めしません。 – Jacob

0

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

+1

そうではありませんか? Firefoxの設定インターフェースを開くようにお願いします。 ;} 冗談だけ。長いレポートを持っている人のためのもう一つの修正点は、例えば1000pxの幅で左に浮動小数点を置いたdivにすべてを入れたかもしれないということです。それはテーブルの容器のせいかもしれない。最初に確認してください。 –

+0

"ただし、他のブラウザよりも厳密に標準に準拠していることがあります。 - 時には、*それは残念ながら "*吸う"ものだ。 – falsarella

12

私はちょうど見つけた、

display:inline-block; 

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

display:block; 

に設定してください。

+1

チップをありがとう。あなたと同じように、私は 'display:table'にDIVを設定しました。私は印刷スタイルシートを作成して 'display:block'に設定し、問題は解決しました! –

6

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

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

FFはまだFF 44.0.2で問題となっています。また、私の 'page-break-inside'と' page-break-after'は、 'block'の' flex'を一旦交換すると、FFで無視されたものが突然正しく動作することを避けることに気付きました。 –

11

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

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

+0

私はまた、これを機能させるために身体に対して相対的な位置を加えなければなりませんでした! –

3

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

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

、私は離れて、リストで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: absoluteposition:relativeから位置を置き換え:)

0

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