page-break-* 在谷歌浏览器上不起作用答案

【问题标题】：page-break-* doesn't work on Google chromepage-break-* 在谷歌浏览器上不起作用
【发布时间】：2012-12-27 12:16:56
【问题描述】：

我只是喜欢将.wp_left_col 下的divs div 放在单独的页面中。这是我的 CSS 代码。

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

它适用于火狐。怎么在谷歌浏览器上不行？

【问题讨论】：

标签： css google-chrome printing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

3 年后，float:none !important 的 div 是在 chrome 中进行休息的解决方案。不需要float:none所有父母（body或html）

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

【讨论】：

【解决方案3】：

现在是 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 上。

【讨论】：

Unfloating 在 Chrome 中为我修复了这个问题！谢谢

【解决方案4】：

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

【讨论】：

仅供参考：break-before 的“always”值似乎不再是有效值。

【解决方案5】：

<div style="display: inline-block; "> 已被报告为避免在 YMMV 中间出现分页的方法。另外，尝试删除边框，并确保没有浮动。另见CSS Page-Break Not Working in all Browsers。

【讨论】：

【解决方案6】：

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/

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

【讨论】：