web-dev-qa-db-ja.com

CSS Page-Breakがすべてのブラウザで機能しない

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および#mainBodyのdivはfloat:leftに設定されているため、うまく表示されます。

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

CSS：

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}
csspage-break
47
Richard Parnaby-King

親要素にフロートを含めることはできません。

設定float:noneすべての親要素でpage-break-before:always正常に動作します。

改ページを壊す可能性のある他のものは、テーブル内での改ページの使用、フローティング要素、インラインブロック要素、およびボーダー付きブロック要素です。

90
Richard Parnaby-King

完成のために、そして同じ問題を抱えている他の人たちのために、私はただ、overflow: visibleをbodyタグに追加して、FireFoxが改ページを順守し、最初のページだけでなくそれ以上を印刷できるようにします。

28
Vincent

Twitterは、Bootstrapクラスがページに多くの要素を追加するため、改ページを機能させるのが困難になっています。Firefoxはすぐに動作しましたが、 Chrome、そして最後に、IE（11）。

ここと他の場所の提案に従いました。私がまだ言及していない「発見」した唯一のプロパティは、「ボックスサイズ」です。 Bootstrapは、このプロパティを「box-sizing：border-box」に設定できます。これによりIEが破損します。IEに優しい設定は「box-sizing：content-box」です。リチャード・パーナビー・キングによって作られた「境界線を持つブロック要素」に関する警告によって https://stackoverflow.com/a/5314590/3397752 。

改ページを壊すかもしれない次のプロパティを発見するのは、ちょっとした競争のようです。

これは私のために働いた設定です（Chrome、FF、IE 11）。基本的に、印刷されたページのすべてのdivのすべての問題のある設定を上書きしようとします。フォーマットを破ると、ページを設定する別の方法を見つける必要があります。

@media print {

    div { float: none !important; position: static !important; display: inline; 
          box-sizing: content-box !important;
    }

}
16
Yuri

これは目立って文書化されていませんが、改ページプロパティはテーブル要素に適用できないことに注意してください。 display: table;またはdisplay:table-cell;が適用された要素（clearfixクラスの下の多くのテンプレートに共通）がある場合、含まれている要素は改ページ規則を無視します。印刷スタイルシートのルールをキャンセルするだけで大​​丈夫です（もちろん、フロートも削除された後）。

これは、一般的なclearfix問題に対してこれを行う方法の例です。

.clearfix:before, .clearfix:after{  
    display: block!important;
}

これに遭遇したもう1つの場所は、テンプレートがdisplay:inline-block;でページ全体（通常はメインまたはメインラッパーと呼ばれる）を宣言したときです。

セクションがインラインブロックの内部にある場合、機能しませんので、同様に目を開いておいてください。 display:inline-block;をdisplay:blockで変更または上書きする必要があります。

7
techdude

親にfloatがある場合、解決策があります。改ページを適用した要素について、要素をoverflow：hiddenにします。それで全部です。それは私のために働いた。

<div style='float:left'>

<p style='overflow:hidden;page-break-before:always;'></p>

</div>
5
Sarath Mohan

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

5
sepehr

持っていた position: absolute;これが機能しない原因となったdiv印刷で。

5
ade jones

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


<style>
@media print
{
table {page-break-after:always}
}
@media print
{
table {page-break-before:always}
}
</style>
3
Mohammad Ali Akbari