Edge只打印内容的第一页，移除Bootstrap可以修复它
遇到了一个问题，在所有其他浏览器中打印都很好，但对于Edge，它只打印多页文档的第一页。
我认为这是[react-to-print][1]的一个问题，但我使用他们的项目对其进行了测试，它在Edge中打印了多页内容。然后，我开始禁用部分CSS，一次禁用一个，直到删除所有CSS。问题仍然存在。
然后我移除了bootstrap.css，这个问题就消失了。添加了我所有的自定义CSS，它工作得很好(只是没有bootstrap.css看起来很糟糕)。
显然，对于Bootstrap 4，Edge并不喜欢。我只是不确定是什么属性导致了它，我需要覆盖它。有什么想法吗？
回答 2
Stack Overflow用户
发布于 2018-08-18 03:47:46
好的，将问题的原因隔离到bootstrap.css中的这一部分。
.table-responsive {
display: block;
width: 100%;
overflow-x: auto; /* This is what was causing it */
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}打印问题正在影响响应表。我刚刚注释掉了：
overflow-x: auto;现在它可以正常工作了。
我确实尝试使用所有可接受的值用!important覆盖它，因此我不必修改bootstrap.css
visible | hidden | clip | scroll | auto他们都没有做任何有价值的事情。
Stack Overflow用户
发布于 2019-01-19 07:15:46
@sockpuppet的修复将适用于IE/Edge打印，但它违背了响应表的目的(允许在移动设备上水平滚动表格)。
我最初尝试在第一个table-responsive声明之后添加以下内容：
@media print {
.table-responsive {
overflow-x: initial !important;
}
}这在Edge中有想要的效果，并且有一个额外的优势，你可以在核心引导css/scss之外添加一些东西。但是，它在IE11中不起作用。因此，我只是将.table-responsive类包装在screen媒体中。例如
@media screen {
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}这对Edge和IE都有效，因为overflow-x: auto只需要在移动屏幕上使用。在打印时可以安全地忽略它。这样做的缺点是需要将其添加到核心引导文件中。我不知道如何迫使媒体关注核心中的东西，从核心之外的东西。它不是加法的，也不会重写。就是这个奇怪的修饰语。
https://stackoverflow.com/questions/51901155
复制相似问题
腾讯云开发者
