Chrome 在打印预览中截断页面内容，而 REST 浏览器不会

Question

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

在图像上，您可以在打印预览中清楚地看到滚动的结束，但仍然有很多内容......另请注意，我已经在 Windows 10、iOS 甚至隐身模式下对此进行了测试，以防插件这样做。

Answer 1

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

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

无论哪种方式，问题都在于chrome使用引导布局的XS大小;因此它错误地计算了我的情况中的页面高度。

Answer 2

解决此问题的另一种更正确的方法是使用以下 sass 规则：

@media only print{
   // create grid for .col-md to work without media query
   @include float-grid-columns(md);
   @include loop-grid-columns($grid-columns, md, width);
   @include loop-grid-columns($grid-columns, md, pull);
   @include loop-grid-columns($grid-columns, md, push);
   @include loop-grid-columns($grid-columns, md, offset);
}

使用这些规则，您可以使引导 med 列在打印中被视为正常。