18

divsアンダー.wp_left_col divを別々のページに配置するのが好きです。これは私のcssコードです。

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

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

4

6 に答える 6

14

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

<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;
}
于 2013-12-13T17:01:00.643 に答える
11

それは 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: left で div にデフォルトで設定されています。

于 2014-07-17T20:48:20.487 に答える
7

3年後、クロムでブレークを機能させるための解決策がありましたfloat:none !important。すべての親divに必要というわけではありません(または)float:nonebodyhtml

@media print {
    div {
        float: none !important;
    }
}
于 2016-02-02T13:03:33.923 に答える
3

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

于 2013-01-13T13:07:28.127 に答える
0

Chromeには、ページ分割後の処理に問題があります。これは既知のバグであり、Chromeだけでなく、より多くのブラウザで問題が発生するため、Googleはこのタイプのスタイルの使用を避けるように何度か言っています。

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

前述のDIVスタイルは、ブラウザー間でテーブルのレンダリングが異なる傾向があるため、より柔軟で操作が簡単で、すべてのブラウザーでほぼ同じように見えます。

これは、DIVにある最初のテーブルのスタイルを設定する方法の簡単な例であり、ピクセル単位で完璧ですが、アイデアが得られるはずです。多少の改善はありますが、使用するフォントがないと見栄えが悪く、背景として画像を使用しません++：P

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/をご覧ください。

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

于 2013-01-13T12:31:13.617 に答える