CSS Page-Break不适用于所有浏览器

前端之家收集整理的这篇文章主要介绍了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类,用CSS隐藏#leftNav和#mainBody的其余部分。

CSS:

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

回答:

阅读W3School’s Page-Break-After文章后,我意识到我没有从#mainBody div中删除浮动。设置float:none;在#mainBody div上,页面现在可以正确显示。 = D

感谢您的回复:)

解决方法

父元素不能在其上有浮动。

在所有父元素上设置float:none会使page-break-before:始终正常工作。

其他可以破坏page-break的方法有:在表中使用分页符,浮动元素,inline-block元素和带边框的块元素。

猜你在找的CSS相关文章