18

I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.

.wpi_left_col > div {
     page-break-after: always !important;
     page-break-inside: avoid !important;
}

It works on Firefox. How come it doesn't work on Google Chrome?

4

6 回答 6

14

所以，经过一番挫折，我找到了解决办法。这是一个 hack，但 Chrome 不正确支持分页符，所以.. 您必须将所有父元素设置为显式浮动：无。在此示例中，我正在打印选项卡式内容。

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="tab">print page 1</div>
                <div class="tab">print page 2</div>
                <div class="tab">print page 3</div>
            </div>
        </section>
    </main>
</body>

然后您的 CSS 看起来与此类似。

html, body, .main-content, .tabs, .tabbed-content { float: none; }

.tab {
    display: block; /* unhide all tabs */
    break-before: always;
    page-break-before: always;
}
于 2013-12-13T17:01:00.643 回答
11

现在是 2014 年 7 月，截至今天做 float: none; 对于所有父元素对我有用：

@media print {
  table {float: none !important; }
  div { float: none !important; }
  .page-break { page-break-inside: avoid; page-break-before: always; }
  .dont-print { display: none; }  
}

此解决方案适用于 Firefox、Chrome 和 Safari。我有 !important 因为我正在使用 Bootstrap，并且 bootstrap 做了一个浮动：默认情况下在 div 上离开。

于 2014-07-17T20:48:20.487 回答
7

3 年后float:none !importantfordiv是在 chrome 中进行休息的解决方案。并非float:none所有父母都需要 (body或html)

@media print {
    div {
        float: none !important;
    }
}
于 2016-02-02T13:03:33.923 回答
3

<div style="display: inline-block; ">据报道，这是一种避免在 YMMV 中间出现分页的方法。另外，尝试删除边框，并确保没有浮动。另请参阅CSS Page-Break Not Working in all Browsers。

于 2013-01-13T13:07:28.127 回答
1

这是将所有父元素设置为不在打印时浮动的更简单的解决方案：

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}
于 2017-10-31T18:54:43.377 回答
0

Chrome 在处理 page-break-after 时存在问题，并且 page-break-inside 这是一个已知的错误，Google 曾多次表示要避免使用这种样式，因为不仅 Chrome，而且更多浏览器在使用它时遇到问题。

您应该考虑为表格设置样式，而不是表格本身。就个人而言，在当今时代，通常最好避免使用表格，因为它们不像 DIV 样式那样灵活。

如上所述的 DIV 样式更灵活且易于使用，并且在所有浏览器上看起来几乎相同，因为浏览器倾向于在不同浏览器之间呈现不同的表格。

这是一个简单的示例，说明如何为您在 DIV 中拥有的第一个表格设置样式，并且到目前为止像素完美，但应该给您一个想法。几乎相同，有一些改进，但没有你使用的字体看起来不太好，不使用图像作为背景是 ++ :P

CSS

#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}

HTML

<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
 <p>Example Work Number 1</p>
 <p>Example Work Number 2</p>
 <p>Example Work Number 3</p>  
</div>
<div style="clear:both;"></div>
</div>
</div>

我已经在网上保存了这段代码供你查看和测试，看看http://jsfiddle.net/tsd4V/

同样，这只是一种更好的方法，您可以使用表格样式，但如果您想要良好的跨浏览器兼容性，请不要使用分页符。

于 2013-01-13T12:31:13.617 回答