一尘不染

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 #leftNav和的div #mainBody设置为float:left,因此显示效果很好。

我只想打印.pageBreak类,#leftNav#mainBody使用CSS 隐藏和的其余部分。

CSS:

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

阅读 359

收藏
2020-05-16

共1个答案

一尘不染

父元素不能float放在它们上面。

float:none在所有父元素上进行设置可以page-break-before:always正常工作。

其他可能中断的事情page-break是:

  • page-break在内部表中使用
  • 浮动元素
  • inline-block 元素
  • 带边框的块元素
2020-05-16