如何解决IE11打印预览中使用page-break-before出现的空白页问题

嘿，我来帮你拆解下这个IE11里的打印分页问题，以及对应的解决思路～

问题原因 #

IE11对CSS分页规则的处理逻辑和Firefox等现代浏览器存在明显差异，核心原因有两点：

1. 伪类与分页属性的兼容性bug：你针对Firefox的修复方案用到了.pagebreakbefore:first-child来覆盖默认的page-break-before:always，但IE11对这种伪类选择器结合分页属性的支持并不完善，无法正确识别并应用page-break-before:avoid规则。
2. 初始分页的强制逻辑：当页面第一个元素就带有page-break-before:always时，IE11会默认在该元素前插入一个空白分页——哪怕它是页面的起始元素，这直接导致了首页空白的问题。

解决方法 #

因为你必须使用page-break-before不能替换成page-break-after，这里给你两个针对性的IE11修复方案：

方案1：IE11专属CSS Hack #

利用IE11特有的CSS识别特性，编写仅对IE11生效的规则，确保第一个.pagebreakbefore元素的分页规则被正确覆盖：

@media print{
    /* 适配Firefox等现代浏览器的规则 */
    .pagebreakbefore:first-child {
        display: block;
        page-break-before: avoid;
    }
    .pagebreakbefore {
        display: block;
        page-break-before: always;
    }

    /* 仅IE11生效的修复规则 */
    _:-ms-fullscreen, :root .pagebreakbefore:first-child {
        page-break-before: avoid !important;
    }
}

这个hack利用了IE11对特定伪元素的识别逻辑，让后面的规则只在IE11中触发，强制覆盖默认的分页规则。

方案2：添加专属类名（更稳妥的兼容性方案） #

如果不想依赖CSS hack，可以给第一个带有pagebreakbefore类的元素额外加一个专属类，比如no-first-pagebreak：

<div class="wrapper chromefix pagebreakbefore no-first-pagebreak">

然后在打印样式中针对这个类设置分页规则：

@media print{
    /* 针对第一个分页元素取消前置分页 */
    .pagebreakbefore.no-first-pagebreak {
        display: block;
        page-break-before: avoid;
    }
    /* 其他分页元素保持强制前置分页 */
    .pagebreakbefore {
        display: block;
        page-break-before: always;
    }
}

这种方法更直观，避免了依赖浏览器特定的hack，兼容性更稳定。

需要额外注意：IE11要求分页元素必须是块级元素，所以确保display:block已经设置（你现有规则里已经包含了这一点，没问题）。

内容的提问来源于stack exchange，提问作者Aswin Francis