IE11打印预览首页出现空白页问题求助

嘿，我处理过好多IE11打印的奇葩问题，你这个首页空白的情况，十有八九是IE11对打印样式的解析逻辑和Chrome不一样导致的，给你几个实战有效的排查和修复方案：

• 检查分页属性的滥用：IE11对page-break-before/page-break-after的处理特别“较真”，要是你给页面最顶部的容器（比如body或者第一个section）加了page-break-before: always，直接就会强制在前面插空白页。赶紧把这类属性改成page-break-before: avoid，或者只在真正需要分页的元素上精准设置，别给根容器乱加。

• 修复打印样式的边距溢出：IE11打印时会把页面可视区域外的margin、padding也算进打印范围，很容易把第一页内容挤到下一页。试试在打印媒体查询里重置基础样式：

@media print {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    overflow: visible;
  }
}

• 处理绝对定位元素：IE11对打印场景下的绝对定位支持烂得一批，要是页面里有绝对定位的头部、尾部或者悬浮元素，很可能打乱整个打印布局。可以在打印样式里把它们改成相对定位：

@media print {
  .your-absolute-header, .your-absolute-footer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
}

• 强制IE11用标准模式渲染：有时候IE11会偷偷用兼容模式加载页面，导致你的现代打印样式直接失效。在页面头部加上这个meta标签，锁死标准模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

• 移除不必要的100%高度设置：如果给body或者顶层容器设置了height: 100%，IE11打印时会错误地把第一页高度拉满，把内容推到下一页。改成height: auto就能解决这个问题。

你可以逐个尝试这些方案，一般来说前两个就能解决大部分情况。

内容的提问来源于stack exchange，提问作者B Best