CSS 改ページがすべてのブラウザで機能しない 質問する

CSS 改ページがすべてのブラウザで機能しない 質問する

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

クラスのみを印刷し.pageBreak#leftNavと残りの部分は#mainBodyCSS で非表示にしたいです。

CSS:

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

ベストアンサー1

親要素はfloatそれらを持つことができません。

float:noneすべての親要素に設定するとpage-break-before:always、正しく動作するようになります。

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

  • page-breakテーブル内使用
  • 浮動要素
  • inline-block要素
  • 境界線のあるブロック要素

おすすめ記事