我的应用程序中有一个 iframe，如果我在某些 div 上添加分页符，它会在 Chrome 上被忽略（在 Safari 上它按预期工作）。
我只有这个控制分页符的打印 css：
page-break-before: always;
page-break-inside: avoid;
此外，如果我将此 iframe 作为单独的页面打开，分页符也会按预期工作。
【问题讨论】：
标签： javascript jquery html css iframe
要控制分页的父元素和元素必须声明为：
position: relative;
这适用于：
page-break-before
page-break-after
page-break-inside
但是控制page-break-inside它不会在Safari上工作（在5.1.7版本上测试）
【讨论】：
我在同样的问题上苦苦挣扎。在我的场景中，我使用隐藏的 iframe 无缝加载打印友好的内容，然后触发打印对话框。通过在 iframe 元素上指定 0px（甚至 1px）的宽度，Chrome 将有效地忽略我的打印 CSS。
通过仅指定 0px 的高度而不设置宽度，Chrome 开始尊重打印样式。
【讨论】：