chrome 在打印预览时会截断页面内容，而其他浏览器则不会答案

【问题标题】：chrome truncates page contents when in print preview while rest browsers don'tchrome 在打印预览时会截断页面内容，而其他浏览器则不会
【发布时间】：2017-06-27 12:50:41
【问题描述】：

我在 Chrome 浏览器中发现了一个非常奇怪的行为（我当前的版本是 54.0.2840.59）；当我尝试打印预览我开发的 html 页面时，它会截断页面内容，预览的内容比我拥有的要少。所有内容都是重复的，因此特定元素不可能触发该问题。另一方面，当我在（IE11、Edge、Firefox、Safari）等其他浏览器中打印预览同一页面时，我看到了整个内容！这是我在打印预览模式下的 Chrome 屏幕截图： print preview truncates the rest of the page

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

【问题讨论】：

标签： html css printing print-preview

【解决方案1】：

解决这个问题的另一种更合适的方法是使用以下 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 列在打印中被视为正常。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

面临同样的问题。你用 !importants 改变了表格是什么意思。您是否有不正确的自定义 CSS？
Chrome 认为视口小于 768px。所以你真正需要做的是重新设置整个网格的样式，就好像它是 col-xs 一样。在我的情况下，我将网格设置为表格和表格单元格，而不是浮动。但当然，您可以将 col-xs-* 扩展到您的元素，而不是使用 table。我使用了重要的规则，因为选择器更强大，我需要即时结果，但这无关紧要。