Question

我使用以下方法创建了一些特定于打印的样式：

@media print {
/* Styles */
}

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

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

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

我的生活无法弄清楚发生了什么。如果我在Chrome中模拟打印介质，那么它可以很好地加载样式，当我实际尝试打印它不起作用时。我已经尝试了很多东西，添加media=属性，双引号，更改href等的顺序都无济于事!!

注意，我们不再使用type了，因为我认为您不再需要使用它了。我还是尝试添加它，但它仍然无法正常工作！

我甚至试过这个：http://lawrencenaman.com/optimisation/print-media-queries-not-working/但它仍然无法运作。它让我发疯，有什么想法吗？

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

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

Answer 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">');
}

Answer 2

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

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

这将阻止浏览器应用标记为＆＃34; screen＆＃34;的样式表中的规则。为我工作

Answer 3

我也遇到了这个问题，发现这是因为我在Chrome中进行了渲染设置。测试打印预览时，我已将仿真媒体类型设置为“打印”。当我去实际测试打印时，我将媒体仿真设置为“屏幕”。我应该将其设置为“不模拟”。当它在“屏幕”上时，打印预览将忽略所有打印介质查询，并且仍然像对待屏幕一样对待页面。当我最终将其设置回“ no emulation”时，它开始表现出您所期望的状态。

Answer 4

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

Answer 5

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

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

Chrome中是否会忽略打印媒体查询？

5 个答案: