打印媒体查询在 Chrome 中被忽略？答案

【问题标题】：Print media queries being ignored in Chrome?打印媒体查询在 Chrome 中被忽略？
【发布时间】：2014-08-30 07:02:57
【问题描述】：

我正在使用以下内容创建一些特定于打印的样式：

@media print {
/* Styles */
}

当我们使用 SASS 时，所有样式都会在运行时编译到一个样式表中，styles.css，在文档的<head> 中声明如下：

<link rel='stylesheet' href='/assets/css/styles.css'>

现在当我从 chrome (Ctrl+P) 打印时，它完全忽略了我的打印样式，但 Firefox (30.0) 很好。 IE(11) 很糟糕，但这是因为我们有很多 IE 似乎不喜欢的显示/隐藏面板/

我一生都无法弄清楚发生了什么。如果我在 Chrome 中模拟打印媒体，那么它会很好地加载样式，当我真正尝试打印时，它就不起作用了。我尝试了很多东西，添加media= 属性、双引号、更改href 的顺序等都无济于事！

注意，我们不再使用type，因为我认为您不再需要使用它。我已经尝试添加这个，但它仍然不起作用！

我什至试过这个：http://lawrencenaman.com/optimisation/print-media-queries-not-working/，但它仍然不起作用。快把我逼疯了，有什么想法吗？

更新：所以我注意到当我点击Ctrl + P 打印页面时，我看到的预览似乎使用了打印样式表中的一些样式，但似乎使用移动媒体查询呈现所有内容？我认为可能与断点有冲突，有机会会更新。

UPDATE2：我可以看到打印样式表正在底部加载，所以理论上这应该覆盖所有其他媒体查询（至少是我试图覆盖的那些）？

【问题讨论】：

标签： html css google-chrome printing media-queries

【解决方案1】：

我尝试添加

@media print {
    * {
        display:none;
    }
}

到我的一个网站的 style.css：不起作用。

然后我添加了

<link rel="stylesheet" href="/css/print.css" media="print">

在其他样式表之后插入头部并将与上面相同的规则（不带@media print {}）插入到 print.css。 Chrome 现在会解释该规则，并且不会在打印预览中显示任何内容。

我认为问题出在使用@media print。但我不知道为什么 chrome 会这样。

编辑：通过 JavaScript 的其他解决方案：

if(/chrome/i.test(navigator.userAgent) {
    document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}

【讨论】：

感谢您的回复老兄。我要添加这个，看看它是否有效。我试图避免这种情况，因为我不想添加另一个 HTTP 请求（无论多小）。
您是否尝试将 media="all" 添加到您的链接中？另一种解决方案可能是仅加载 chrome 的 print.css（我已将解决方案添加到我的帖子中）。
仍然不适合我！！是的，我们已经在我们的一个 SASS 混合中获得了media="all"....
可以把编译好的styles.css提供给我吗？
@RobW 不幸的是没有。它从未出现在我们最初的项目要求中，并且正在单独研究它作为增强功能。

【解决方案2】：

您可以尝试将样式表媒体属性的其余部分设置为

media="screen" 并将样式表打印到media="print"。

这将阻止浏览器应用标记为“屏幕”的样式表中的规则。为我工作

【讨论】：

这解决了我的问题。我的主样式表仍然有 media="all" 属性，我把它关掉了。
啊。拯救了我的一天。将 media="screen" 添加到所有非打印样式表就可以了！

【解决方案3】：

我也遇到了这个问题，发现是因为我在 Chrome 中的渲染设置。在测试打印预览时，我将仿真媒体类型设置为“打印”。当我去实际测试打印时，我将媒体仿真设置为“屏幕”。我应该将其设置为“无仿真”。当它在“屏幕”上时，打印预览会忽略所有打印媒体查询，并且仍然将页面视为屏幕。当我最终将其重新设置为“无仿真”时，它开始表现得如您所愿。

【讨论】：

【解决方案4】：

我遇到的一个问题是 rel='stylesheet' 没有在打印 css 链接中设置。添加它可以解决问题。

【讨论】：

【解决方案5】：

实现这一点的另一种方法：打印样式之前的 CSS 错误。由于我们似乎都有将打印样式放在最后的冲动，因此他们更容易受到这种影响。当 CSS 出现错误时，它不会抱怨……它只会丢弃样式表的其余部分。

为打印样式提供自己的样式表——即使只是一个单独的内联标记——也可以解决这个问题以及 media-spec'd-in-style-tag 错误。

【讨论】：