打印在Chrome中忽略的媒体查询？ [英] Print media queries being ignored in Chrome?

问题描述

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

I'm creating some print specific styles using the following:

@media print {
/* Styles */
}

$ b

由于我们使用SASS将所有样式编译成一个样式表，在文档的< head> 中声明的 styles.css 如下：

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

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

Now when I print from chrome (Ctrl+P), it completely ignores my print styles but Firefox (30.0) is fine. IE(11) is terrible but this is because we have a lot of show/hide panels which IE doesn't seem to like/

不能为生活我找出了发生了什么。如果我在Chrome中模拟打印介质，那么它加载样式很好，它是当我实际尝试和打印，它不工作。我尝试了很多东西，添加了 media = 属性，双引号，改变了 href 等的顺序无效！

Can't for the life of me figure out what's happening. If I emulate print media in Chrome then it loads the styles fine, it's when I actually try and print that it doesn't work. I've tried loads of things, adding, media= attributes, double quotes, changing the order of href etc all to no avail!!

注意，我们不再使用类型，因为我认为您不需要使用这个了。我已尝试添加这个反正，但它仍然不工作！

Note, we're not using type anymore as I thought you didn't need to use this anymore. I've tried adding this anyway but it still doesn't work!

我甚至尝试过： http://lawrencenaman.com/optimisation/print-media-queries-not-working/ 但它仍然不工作。

I've even tried this: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ but it still doesn't work. It's driving me crazy, any ideas?

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

UPDATE: So I noticed that when I hit Ctrl + P to print the page, the preview that I see seems to use some of the styles from the print stylesheet but seems to render everything using a mobile media query? I think there may be some conflict with a breakpoint, will update when I get a chance.

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

UPDATE2: I can see that the print stylesheet is loading at the bottom so this should in theory over write all the other media queries (at least the ones that I'm trying to over write)?

推荐答案

我尝试添加

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

到我的一个网站style.css：

to one of my sites' style.css: Doesn't work.

然后我添加了

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

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

after the other stylesheets into the head and inserted the same rule as above (without @media print {}) to the print.css. Chrome now interprets the rule and does not display anything within the print preview.

我假设问题是使用@media print。但是我不知道为什么chrome的行为像这样。

I'd assume the problem is using @media print. But I have no idea why chrome behaves like that.

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

Other Solution via JavaScript:

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

这篇关于打印在Chrome中忽略的媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！