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

Question

我的应用程序中有iframe，如果我在某些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开始尊重打印样式。