59

IE (IE6 でも正しく動作します) と Opera を除いて、ほとんどのブラウザでこれを動作させるのに問題があります。

Firefox は div を正しく分離しますが、最初のページのみを印刷します。

Chrome と Safari は、改ページを最後の div にのみ適用します。

これをすべてのブラウザで正しく機能させるにはどうすればよいですか?

HTML:

<div id="leftNav">
  <ul>
    <!--links etc-->
  </ul>
</div>
<div id="mainBody">
 <div id="container">
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
 </div>
</div>

ID#leftNavとの div#mainBodyは に設定されているfloat:leftため、きれいに表示されます。

.pageBreakクラスのみを印刷し、CSS#leftNavの残りの部分を非表示にします。#mainBody

CSS:

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}
4

9 に答える 9

111

親要素はそれらの上に持つことはできませんfloat。

float:noneすべての親要素に設定すると、page-break-before:always正しく機能します。

壊れる可能性のある他のものは次のpage-breakとおりです。

  • page-break内部テーブルの使用
  • 浮遊要素
  • inline-block要素
  • 枠付きブロック要素
于 2011-03-15T16:12:20.480 に答える
34

overflow: visible完成のために、また同じ問題を抱えている他の人のために、FireFoxが改ページに従い、さらには印刷するだけでなく、bodyタグにも追加する必要があることを追加したいだけです。最初のページ。

于 2013-03-22T17:45:45.357 に答える
7

これがposition: absolute;機能しない原因となった div 印刷がありました。

于 2013-12-17T17:00:16.340 に答える
6

「バージョン 3.5 までの Firefox は、回避、左、または右の値をサポートしていません。」 IE のサポートも部分的であり、:page-break-before:always; によって必要なものを達成できます。これはすべてのブラウザーでサポートされていますが、「最初のページのみを印刷します」: css 関連ではないと思います。ブラウザーの印刷ウィンドウの sth だと思います:)

于 2011-02-03T09:55:32.117 に答える
5

あなたのコードは何ですか？
このような？： 


<style>
@media print
{
table {page-break-after:always}
}
@media print
{
table {page-break-before:always}
}
</style>
于 2011-02-03T09:42:06.343 に答える