Microsoft Edge浏览器网页打印及预览功能异常问题求助

问题分析 #

这个问题属于CSS打印样式的兼容性问题，Edge在处理打印渲染时，对浮动布局的解析逻辑和Chrome存在差异；加上滚动后右键打印时，Edge可能错误地从当前视口位置开始渲染打印内容，而非整个文档。你的自定义打印样式仅给.col-md-*添加了float: left，但未处理浮动清除、容器布局等细节，进一步加剧了Edge的渲染异常。

具体修复方案 #

1. 替换浮动布局为Flex（推荐）

Bootstrap的网格系统支持flex布局，打印时改用flex替代float，能规避Edge的浮动渲染bug：

@media print {
  .container, .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: none; /* 取消原有浮动 */
    flex: 0 0 auto;
  }

  /* 保留原有宽度设置 */
  .col-md-12 { width: 100%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-9 { width: 75%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-6 { width: 50%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-3 { width: 25%; }
  .col-md-2 { width: 16.66666667%; }
  .col-md-1 { width: 8.33333333%; }
}

2. 强制打印整个文档的渲染范围

添加CSS强制Edge打印时包含完整页面内容，避免仅渲染当前视口：

@media print {
  body, html {
    height: auto !important;
    overflow: visible !important;
  }

  /* 确保顶部核心元素不被截断，替换为你实际的类名 */
  .page-header, .report-title {
    page-break-before: avoid;
    page-break-inside: avoid;
  }
}

3. 确保样式表加载优先级

自定义打印样式必须在Bootstrap之后加载，保证样式能正确覆盖：

<!-- 先加载框架样式，再加载自定义打印样式 -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<link href="~/css/mycss.css" rel="stylesheet" media="print" />

4. 清除浮动容器（若坚持用float）

给包含浮动元素的容器添加清除浮动规则，避免布局坍塌：

@media print {
  .row::after {
    content: "";
    display: table;
    clear: both;
  }
}

额外验证 #

• 确保Edge是最新版本，旧版本打印渲染存在已知bug；
• 若临时测试，可先回到页面顶部再右键打印，验证是否为滚动位置触发的临时渲染问题，但上述CSS修复可彻底解决该场景问题。

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