从 Google Chrome 打印引导页面(有时)会导致打印页面的高度被截断

2024-03-23

从这个官方模板开始:http://getbootstrap.com/examples/jumbotron/ http://getbootstrap.com/examples/jumbotron/bootsrap v. 3.3.7 并使用 Google Chrome v. 54.0.2840.99 m(64 位),在最大化窗口 1920px 显示器上,当我尝试以 A4 水平格式打印页面时,打印预览(以及保存的 PDF 或打印的页)的高度被截断。
在本例中,页面高度应为 2,而不是 1。
这发生在:

  • 从 Chrome 打印(在 Firefox v50.0.1 和 IE11 中不存在该问题)
  • 当我在屏幕模式下打印时,当列没有折叠时(在上面的自举示例中,当窗口的宽度大于或等于992px并按打印。如果窗口小于992px我按打印,打印预览不会被截断)
  • 单张纸张高度比引导页面短(在上面的引导示例 A4 Vertical 中,由于内容不足,因此无法重现该问题)

我注意到如果我删除float:left;从所有的.col-**-*打印预览不会截断,但显然单列模板并不总是适合打印。

您也可以在原始引导示例上复制该错误。
如何在打印模式下获取引导网格并且打印页面不被 Chrome 截断?


我也看到了这个问题。我很高兴不仅仅是我。如果更改屏幕视口,打印输出也会发生变化,这一事实特别奇怪。

无论如何,我尝试了@artem的解决方案,但没有成功。

我最终做到了:

@media print {
    [class*="col-md"], [class*="col-sm"], [class*="col-xs"] {
        float: none;
    }
}

这可能并不适用于所有情况,因为它会删除所有浮动。但这足以让我在相对简单的布局上进行打印。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 Google Chrome 打印引导页面(有时)会导致打印页面的高度被截断 的相关文章