一千萬個為什麽

搜索

CSS Page-Break在所有瀏覽器中都不起作用

我無法在大多數瀏覽器中使用它,除了IE(它甚至可以在IE6中正常工作)和Opera。

Firefox正確分隔div但只打印第一頁。

Chrome和Safari僅將分頁符應用於最後一個div。

如何才能正確地在所有瀏覽器中使用它?

HTML:

<div id="leftNav">
  
    <!--links etc-->
</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;
 }
}

最佳答案

父元素不能浮動它們。

在所有父元素上設置 float:none 使 page-break-before:always 正常工作。

其他可以破壞分頁符的事情是:在表格,浮動元素,內聯塊元素和帶邊框的塊元素中使用分頁符。

轉載註明原文: CSS Page-Break在所有瀏覽器中都不起作用