CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 从Google Chrome打印引导页面会导致(有时)打印页面的截断高度大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
从这个官方模板开始:
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中,问题不存在)
>当我在屏幕模式下打印时cols没有折叠(在上面的boostrap示例中,当窗口的宽度大于或等于992px并按下打印时.如果窗口小于992px并按下打印,则打印预览未截断)
>单个纸张高度比自举页面缩短(在上面的自举示例中,A4垂直不会重现问题,因为内容不足)

我注意到,如果我删除float:left;来自所有.col – ** – *打印预览不会截断,但很明显单列模板并不总是适合打印.

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

解决方法

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

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

我最终做了

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

这可能不适用于所有情况,因为它删除所有浮动.但是,在我相对简单的布局上进行打印就足够了.

大佬总结

以上是大佬教程为你收集整理的css – 从Google Chrome打印引导页面会导致(有时)打印页面的截断高度全部内容,希望文章能够帮你解决css – 从Google Chrome打印引导页面会导致(有时)打印页面的截断高度所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。