chrome在打印预览时会截断页面内容，而rest浏览器则不会
chrome在打印预览时会截断页面内容，而rest浏览器则不会
提问于 2017-02-09 21:24:21
我在Chrome浏览器中发现了一个非常奇怪的行为(我当前的版本是54.0.2840.59)；当我试图打印预览我开发的html页面时，它会截断页面内容，预览比我更少的内容。所有内容都是重复的，因此不可能由特定元素触发该问题。另一方面，当我在其他浏览器(如IE11、Edge、Firefox、Safari)中打印预览相同的页面时，我会看到整个内容！这是我在打印预览模式下的Chrome截图：print preview truncates the rest of the page
在图像中，您可以清楚地看到打印预览中滚动的末尾，但仍有许多内容...还要注意的是，我已经在Windows10、iOs甚至在匿名模式下进行了测试，以防有一个插件可以做到这一点。
回答 2
Stack Overflow用户
发布于 2017-02-10 18:25:26
我刚刚找到了一个解决方案。我创建的网格是使用bootstrap。这里有一个例子：https://github.com/twbs/bootstrap/issues/12078
我用!importants改变了整个网格来显示表格(这解决了我的问题)。虽然在社区中，他们已经改变了引导列网格系统，以匹配打印的宽度，这是更好的解决方案。
不管怎样，问题是chrome使用了bootstrap布局的XS大小；因此，在我的例子中，它错误地计算了页面高度。
Stack Overflow用户
发布于 2017-07-27 19:54:48
解决此问题的另一种更合适的方法是使用以下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列设置为在打印时正常查看。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42137928
复制相关文章
相似问题
腾讯云开发者
