Chrome上的iframe中的分页符不起作用？

Question

我的应用程序内部有一个iframe，如果我在某个div上添加了分页div ，则在Chrome上将其忽略（在Safari中，它可以按预期运行）。

我只有控制分页符的此打印CSS：

page-break-before: always; page-break-inside: avoid;

另外，如果我将iframe作为单独的页面打开，分页符也可以按预期工作。

Answer 1

父级和要控制分页的元素必须声明为：

position: relative;

这适用于：

page-break-before
page-break-after
page-break-inside

但控制page-break-inside无法在Safari上使用（已在5.1.7版上测试）

Answer 2

我在同一个问题上挣扎。 在我的方案中，我使用隐藏的iframe无缝加载易于打印的内容，然后触发打印对话框。 通过在iframe元素上指定0px（甚至1px）的宽度，Chrome可以有效地忽略我的打印CSS。

通过仅指定0px的高度并保持宽度不变，Chrome开始采用打印样式。