Mik*_*tar 106 css printing google-chrome
我正试图让谷歌浏览器进行分页.
我通过一堆page-break-after: always;在Chrome中有效的网站被告知,但即使只是一个非常简单的例子,我似乎无法让它工作.有没有办法在使用chrome打印时强制分页？
Phi*_*oss 128
我在包括Chrome在内的所有主流浏览器中都成功使用了以下方法:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
这是一个简化的例子.在实际代码中,每个页面div包含更多元素.
Pet*_*ter 34
实际上,选择接受的答案中缺少一个细节(来自Phil Ross)....
它DOES在Chrome中工作,解决的办法是真的傻!
必须将父控件和要控制分页的元素声明为:
position: relative
看看这个小提琴:http: //jsfiddle.net/petersphilo/QCvA5/5/show/
这适用于:
page-break-before
page-break-after
page-break-inside
但是,在Safari中控制分页内部功能不起作用(至少在5.1.7中)
我希望这有帮助!!!
PS:下面的问题提出了这样一个事实,即最近版本的Chrome不再尊重这一点,即使是位置:相对; 特技.但是,他们似乎确实尊重:
-webkit-region-break-inside: avoid;
看到这个小提琴:http: //jsfiddle.net/petersphilo/QCvA5/23/show
所以我想我们现在必须加上......
希望这可以帮助!
for*_*reh 16
我只想在此注意,Chrome也忽略了已经浮动的div中的page-break-*css设置.
我怀疑在css规范的某个地方有一个合理的理由,但我想有一天它可能会帮助某人;-)
另一个注意事项:如果前一个块元素没有明确的高度,IE7无法确认分页设置:
dav*_*han 11
我遇到了类似的问题,但我最终找到了解决方案.我有溢出-x:隐藏; 应用于<html>标签,所以无论我在DOM下面做了什么,它都不会允许分页.通过恢复溢出-x:可见; 它工作得很好.
希望这有助于那里的人.
Nat*_*ook 10
我自己也遇到了这个问题 - 我的页面在每个浏览器中都有效,但是Chrome - 并且能够将其分离到表格单元格中的分页符元素.(CMS中旧的,继承的模板.)
显然Chrome不支持表格单元格中的page-break-before或page-break-after属性,因此Phil的示例的这个修改版本将第二个和第三个标题放在同一页面上:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
根据CSS规范,Chrome的实施(可疑)是允许的 - 您可以在此处看到更多信息:http://www.google.com/support/forum/p/Chrome/thread？tid = 32f9d9629d6f6789&hl = zh-CN
小心CSS:display:inline-block打印时.
如果我的表位于带有样式的div中,那么转到下一页的CCS属性都不适用于Chrome和Firefox display:inline-block
例如,以下内容不起作用:
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
但是以下工作:
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>