html - Edge 仅打印第一页内容并删除 Bootstrap 修复它

Question

遇到一个问题，在所有其他浏览器中打印都很好，但对于 Edge，它只打印多页文档的第一页。

我以为这是 [react-to-print][1] 的问题，但我使用他们的元素对其进行了测试，它在 Edge 中打印了多页内容。然后我开始禁用我的部分 CSS，一次一个，直到我的所有 CSS 都被删除。问题仍然存在。

然后我删除了 bootstrap.css，问题就消失了。添加回我所有的自定义 CSS，它工作正常(没有 bootstrap.css 看起来很糟糕)。

很明显，Edge 不喜欢 Bootstrap 4 的某些方面。我只是不确定是什么属性导致我需要覆盖它。有什么想法吗？

Answer 1

@sockpuppet 的修复适用于 IE/Edge 打印，但它违背了响应式表格的目的(允许表格在移动设备上水平滚动)。

我最初尝试在第一个 table-responsive 声明之后添加:

@media print {
    .table-responsive {
        overflow-x: initial !important;
    }
}

这在 Edge 中具有预期的效果，并且具有您可以在核心 Bootstrap css/scss 之外添加的附加优势。但是，它在 IE11 中不起作用。因此，我只是将 .table-responsive 类包装在屏幕媒体中。例如

@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 只在移动屏幕上需要。打印时可以安全地忽略它。这样做的缺点是它需要添加到核心 Bootstrap 文件中。我不知道如何从核心之外的事物强制媒体关注核心事物。它不是附加的，也不会覆盖。就是这个奇怪的修饰符。