html - 使用 Bootstrap，CSS 打印媒体规则适用于 Chrome，但不适用于 Firefox

Question

我在样式表中添加了一些@media print 查询，以尝试使打印出来的内容更具吸引力和实用性(典型内容:删除导航栏、交互功能、打印链接)。它在 Chrome 上按我想要的方式工作，但在 Firefox 和 Safari 上却不行。 (我正在浏览类似 this 的页面)。

我编写的规则不显示某些 Material ，但网格布局的行为不同:

火狐

Chrome

额外的 @print 样式被应用于两者，但 Chrome 重现了布局而没有应用任何其他媒体规则(因此它出现在一列中——这就是我想要的喜欢);火狐没有。

我怀疑我的问题既是关于 Bootstrap 的，也是关于 @print 查询本身的。但是在我开始编写 @print 规则以尝试重置 Bootstrap 的布局之前，关于浏览器如何构造打印页面，我是否还应该了解其他内容？是否有一个简单的解决方案来确保其他浏览器生成看起来像 Chrome 的东西？

Answer 1

经过一些额外的探索，找到了 this question似乎 Chrome 将打印的页面宽度设置为小于 768 像素，以便 Bootstrap 使用 xs 样式。 This issue详细讨论了它。

我喜欢 Chrome 的(也许是奇怪的)行为；要在 Firefox 上保护它需要重写 Bootstrap 规则。我想出的是这样的:

@media print {
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
 .col-sm-4,
 .col-sm-5,
 .col-sm-6,
 .col-sm-7,
 .col-sm-8,
 .col-sm-9,
 .col-sm-10,
 .col-sm-11,
 .col-sm-12 {
    float: none;
    width: 100%;
 }
}

我不确定这个解决方案如何明智，但它似乎有效。