jil*_*ego 17 css printing google-chrome
我就像divs下.wp_left_col div被放置在单独的页面.这是我的css代码.
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
它适用于Firefox.怎么会在谷歌浏览器上不起作用？
Mat*_*ing 12
所以,经过一番挫折,我找到了解决方案.这是一个黑客,但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;
}
小智 11
它是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上.
小智 7
3年后float:none !important,div是解决方案让铬合金中断.float:none所有父母(body或html)都没有必要
@media print {
div {
float: none !important;
}
}
Chrome 在处理 page-break-after 和 page-break-inside 时遇到问题，这是一个已知的错误，谷歌已经多次表示要避免使用这种类型的样式，因为不仅 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;}
超文本标记语言
<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/
同样，这只是一个更好的方法，您可以使用表格样式，但如果您想要良好的跨浏览器兼容性，请不要使用分页符。