CSS Page-Break不能在所有浏览器中使用 [英] CSS Page-Break Not Working in all Browsers

问题描述

我无法在大多数浏览器中使用此工具，除了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; 
} 
} 
  

p>

阅读 W3School的Page-Break-After 文章，我意识到，我没有从#mainBody div中删除浮动。设置float：none;在#mainBody div上，页面现在可以正确显示。感谢您的回复：）

解决方案

p>父元素不能有浮动元素。

在所有父元素上设置 float：none

其他可以破坏分页符的方法有：使用分页符内部表格，浮动元素，行内块元素和具有边框的块元素。

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.

Firefox separates the divs correctly but only prints the first page.

Chrome and Safari only applies the page break to the last div.

How can I get this working across all browsers correctly?

The 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>

The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.

I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.

The CSS:

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

Answer:

After reading the W3School's Page-Break-After article, I realised that I hadn't removed the float from the #mainBody div. After setting float:none; on the #mainBody div, the pages now display correctly. =D

Thanks for your replies :)

解决方案

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are: using page-break inside tables, floating elements, inline-block elements, and block elements with borders.

这篇关于CSS Page-Break不能在所有浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！