ie8 中的 css 分页符(iframe)

Question

我有一个页面，我在其中放置了 3 个 iframe，其中显示了其他 3 个页面。 一切都包裹在一个大的 DIV 元素中，每个 iframe 都包裹在它自己的 DIV 元素中。 在每个 DIV 之间，我放置了另一个具有以下 CSS 代码的 DIV 元素:

@media print { .page-break {display:block; page-break-before:always;} }

在 Firefox 中(在这种情况下是版本 12，但我想这不是版本问题)，一切都按照打印整个页面的预期进行，但在 IE8 中，分页符 CSS 似乎不起作用所有页面在打印时都弄乱了。

我在这里遇到一个答案，这个分页符不适用于定位元素，但在我的例子中，带有这个 CSS 代码的元素是我在这里描述的介于两者之间的 DIV 和打印页面内容的定位( relative/absolute, float) 仅在页面的源代码中完成，包含在 iframe 中而不是在主页中，所以我不确定这是我在这里遇到的情况的原因。

为了让这个分页符在 IE8 上也能正常工作，我必须做什么？

这是主页面的代码:

<style>
@media print { .page-break {display:block; page-break-before:always;} }
</style>

<div align="left">
<div id="frame_gop" align="left" style="width:759px;height:980px;">
<iframe src="page1.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
<div class="page_break"></div>
<div id="frame_report" align="left" style="width:759px;height:980px;">
<iframe src="page2.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
<div class="page_break"></div>
<div id="frame_release" align="left" style="width:759px;height:980px;">
<iframe src="page3.html" width="759" height="980" frameborder="0" align="left"></iframe>
</div>
</div>

Answer 1

@IE8 不支持媒体查询，删除它。只使用简单的类

替换:

@media print { .page-break {display:block; page-break-before:always;} }

来自

.page-break {display:block; page-break-before:always;}

谢谢