Question

我只想将divs .wp_left_col下的div放在不同的页面中。这是我的css代码。

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

适用于Firefox。怎么会在Google Chrome上无效？

Answer 1

所以，经过一番挫折之后，我找到了解决方案。这是一个黑客，但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;
}

Answer 2

这是2014年7月，截至今天浮动：无;所有父元素对我有用：

@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。我有！重要因为我正在使用Bootstrap，而bootstrap执行浮动：默认情况下保留在div上。

Answer 3

3年后，float:none !important div是解决方案，以便在Chrome中实现休息。 float:none所有家长（body或html）

无需{} 1}

@media print {
    div {
        float: none !important;
    }
}

Answer 4

据报道，

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

Answer 5

Chrome在处理分页后处理时出现问题，而且这是一个已知的错误，谷歌已经多次说过要避免使用这种类型的样式，因为不仅使用Chrome而且还有更多浏览器遇到问题它

您应该考虑将表格设计为DIV而不是表格本身。就个人而言，在这个时代，通常最好避免使用桌子，因为它们不像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/

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

Answer 6

这是一个更简单的解决方案，可以将所有父元素设置为不浮动在打印上：

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}

page-break- *不适用于Google Chrome

6 个答案: