如何在Outlook桌面端打印邮件时隐藏内容并消除空白页

在桌面端Outlook（Office 365）打印HTML邮件时，通过@media print配合display: none隐藏非打印内容后，Outlook仍会错误计算隐藏元素的高度，导致打印时多出一页空白。因业务限制无法移除页眉页脚或生成PDF，现提供针对该问题的可行解决方案。

复现问题的简化代码 #

<html>
<head>
<style>
  @media print {
      .not-printable {
        display: none;
      }
    }
</style>
</head>
<body>
  start
  <div style="border: 1px solid black; height: 400px;">This div should be visible both on screen and in printout.</div>
  <div style="border: 1px solid black; height: 400px;" class="not-printable">This div should be visible on screen only</div>
  end
</body>
</html>

可行解决方案 #

Outlook桌面端基于Word渲染引擎，对CSS打印样式的支持存在特殊性，仅用display: none无法让它完全忽略元素的布局空间，可尝试以下方法：

方法1：组合多种CSS属性强制隐藏 #

在打印样式中同时设置多个属性，彻底消除元素的布局占用：

@media print {
  .not-printable {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

方法2：使用Outlook专属条件注释 #

针对Outlook添加专属样式，直接将隐藏元素的高度设为0：

<!--[if mso]>
<style>
  .not-printable {
    height: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
</style>
<![endif]-->

注：条件注释虽针对旧版Outlook设计，但Office 365桌面端仍兼容此类规则。

方法3：将元素移出打印视口 #

在打印样式中把元素定位到页面可视区域之外，同时清空尺寸：

@media print {
  .not-printable {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

验证建议 #

修改样式后，直接在Outlook中打开打印预览功能，确认空白页是否消失。若单一方法无效，可尝试组合使用上述规则，比如同时添加条件注释和打印媒体查询样式。

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