web-dev-qa-db-ja.com

page-break- *はGoogleでは機能しませんchrome

.wp_left_coldivsの下のdivを別のページに配置するのが好きです。これは私のcssコードです。

.wpi_left_col > div {
     page-break-after: always !important;
     page-break-inside: avoid !important;
}

Firefoxで動作します。 Google Chromeで動作しないのはなぜですか？

cssgoogle-chromeprinting
17
jilseego

だから、いらいらした後、私は解決策を見つけました。これはハックですが、Chromeは改ページを適切にサポートしていないため、すべての親要素を明示的にfloatに設定する必要があります。なし。この例では、タブ付きで印刷しています。コンテンツ。

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="tab">print page 1</div>
                <div class="tab">print page 2</div>
                <div class="tab">print page 3</div>
            </div>
        </section>
    </main>
</body>

次に、CSSは次のようになります。

html, body, .main-content, .tabs, .tabbed-content { float: none; }

.tab {
    display: block; /* unhide all tabs */
    break-before: always;
    page-break-before: always;
}
12
Matthew Nolting

それは2014年7月であり、今日の時点でfloat：noneを実行しています。すべての親要素が私にとってうまくいきました：

@media print {
  table {float: none !important; }
  div { float: none !important; }
  .page-break { page-break-inside: avoid; page-break-before: always; }
  .dont-print { display: none; }  
}

このソリューションは、Firefox、Chrome=およびSafariで機能します。Bootstrapを使用しているため、ここに！importantがあり、bootstrapはfloatを実行しています。 divのデフォルト。

11
Sid Krishnan

3年後 float:none !important for divは、Chromeでブレークを機能させるためのソリューションでした。する必要はありませんfloat:noneすべての親（bodyまたはhtml）

@media print {
    div {
        float: none !important;
    }
}
7
José Esteves

<div style="display: inline-block; ">は、YMMVの途中で改ページを回避する方法として報告されています。また、境界線を削除してみて、フロートがないことを確認してください。 CSSページ-ブレークがすべてのブラウザで機能しない も参照してください。

3
user663031

すべての親要素を印刷時に浮動しないように設定するための簡単な解決策は次のとおりです。

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}
0
Jeremy Caris

Chromeは改ページ後の処理に問題があり、改ページ内は既知のバグであり、Googleはこのタイプのスタイリングの使用を避けるために数回言ったChromeだけでなく、多くのそれを使用して問題が発生するブラウザーが増えています。

テーブル自体ではなく、DIVを考慮したテーブルのスタイリングを検討する必要があります。個人的にはこの日と年齢では、DIVスタイリングほど柔軟性がないため、通常はテーブルの使用を避けるのが最善です。

前述のDIVスタイリングは、より柔軟で扱いやすく、すべてのブラウザーでほとんど同じに見えます。これは、ブラウザーがブラウザー間でテーブルを別々にレンダリングする傾向があるためです。

以下は、DIVにある最初のテーブルのスタイルを設定する簡単な例です。これはピクセル単位で完璧ですが、アイデアが得られるはずです。ほぼ同じですが、いくつかの改善はありますが、使用するフォントがないと、見栄えがよくありません。背景として画像を使用しません。

[〜＃〜] css [〜＃〜]

#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}

[〜＃〜] html [〜＃〜]

<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
 <p>Example Work Number 1</p>
 <p>Example Work Number 2</p>
 <p>Example Work Number 3</p>  
</div>
<div style="clear:both;"></div>
</div>
</div>

確認してテストできるように、このコードをオンラインに保存しました。 http://jsfiddle.net/tsd4V/ をご覧ください。

繰り返しますが、これはテーブルスタイリングを使用できる優れた方法ですが、ブラウザ間の互換性を確保したい場合は改ページを使用しないでください。

0
Simon Hayter