频道导航

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

2019-05-09 CSS 前端之家

前端之家收集整理的这篇文章主要介绍了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;
    }
}

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

上一篇：禁用Symfony中特定操作的CSS样式表下一篇：css – 缺少Chrome动画按钮

猜你在找的CSS相关文章

IE浏览器兼容性调整总结技巧

前言最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个...

作者：前端之家时间：2021-02-13

css属性总结

前言有些属性不是很常用，但是工作中遇到了，记录一下，方便学习。 1、text-indent text-...

作者：前端之家时间：2021-02-13

政府网站公祭日，如何使网站整体变灰

前言政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决...

作者：前端之家时间：2021-02-13

css实现图片动画效果

需求项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。实现...

作者：前端之家时间：2021-02-13

css实现文字渐变

html代码 css代码效果图

作者：前端之家时间：2021-02-13

移动端rem距离单位的使用

在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的...

作者：前端之家时间：2021-01-10

使用 media 实现响应式布局

最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下...

作者：前端之家时间：2021-01-10

教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看...

作者：前端之家时间：2021-01-10

CSS盒模型之内边距、边框、外边距十九问（持续更新）

本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考...

作者：前端之家时间：2020-12-30

轻松上手CSS Grid网格布局

今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看...

作者：前端之家时间：2020-12-29

最新文章