chrome在打印预览中会截断页面内容，而其他浏览器则不会 [英] chrome truncates page contents when in print preview while rest browsers don't

问题描述

我在Chrome浏览器中发现了一个非常奇怪的行为(我的当前版本是54.0.2840.59)；当我尝试打印预览已开发的html页面时，它会截断页面内容，预览的内容比我少.所有内容都是重复的，因此特定元素不可能触发该问题.另一方面，当我在其他浏览器(例如，IE11，Edge，Firefox，Safari)中打印预览同一页面时，我会看到全部内容！这是我在打印预览模式下从Chrome截取的屏幕截图: 打印预览会截断页面的其余部分

I have found a very weird behavior in Chrome browser (my current version is 54.0.2840.59); when I am trying to print preview a html page that I have developed it truncates the page content, previewing less content than I have. All contents are repetitive so there is no chance that a specific element trigger that issue. From the other hand when I print preview the same page in other browsers such as (IE11, Edge, Firefox, Safari) I see the whole content! Here is my screenshot from Chrome in print preview mode: print preview truncates the rest of the page

在图像上，您可以清楚地看到打印预览中的滚动结束，但是仍然有很多内容... 还要注意，我已经在Windows 10，iO和甚至在隐身模式下进行了测试，以防万一插件会做到这一点.

At the image you can clearly see the end of scroll in the print preview but there is still a lot of content... Also note that I have tested this in Windows 10, iOs and even in incognito mode in case an addon would do that.

推荐答案

我刚刚找到了解决方案.我创建的网格带有引导程序. 这里有一个案例: https://github.com/twbs/bootstrap/issues/12078

I just found a solution. The grid I had created was with bootstrap. There is a case about that here: https://github.com/twbs/bootstrap/issues/12078

我将整个网格更改为显示带有！importants的表格(解决了我的情况).尽管在社区中，他们已更改了引导列网格系统以匹配打印宽度，但这是更好的解决方案.

I changed the whole grid to display table with !importants, (which solved my case). Though in the community they have changed the bootstrap column grid system in order to match width for print, which this is better solution.

无论哪种方式，问题都在于chrome使用引导程序布局的XS大小；因此在我的情况下它会错误计算页面高度.

Either way, the problem was that chrome use the XS size of bootstrap layout; hence it miscalculated the page height in my case.

这篇关于chrome在打印预览中会截断页面内容，而其他浏览器则不会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！