Html 打印媒体查询在 Chrome 中被忽略？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24650543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print media queries being ignored in Chrome?
提问by zik
I'm creating some print specific styles using the following:
我正在使用以下内容创建一些特定于打印的样式：
@media print {
/* Styles */
}
As we are using SASS all the styles get compiled into one stylesheet, styles.cssat runtime, which is declared in the <head>of the document as follows:
当我们使用 SASS 时，所有样式styles.css在运行时都被编译成一个样式表，在<head>文档中声明如下：
<link rel='stylesheet' href='/assets/css/styles.css'>
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 (Ctrl+P) 打印时，它完全忽略了我的打印样式，但 Firefox (30.0) 很好。IE(11) 很糟糕，但这是因为我们有很多 IE 似乎不喜欢的显示/隐藏面板/
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 hrefetc all to no avail!!
不能为我的生活弄清楚发生了什么。如果我在 Chrome 中模拟打印媒体，那么它会很好地加载样式，当我实际尝试打印时，它不起作用。我已经尝试了很多东西，添加，media=属性，双引号，改变顺序href等等都无济于事！！
Note, we're not using typeanymore as I thought you didn't need to use this anymore. I've tried adding this anyway but it still doesn't work!
请注意，我们不再使用type，因为我认为您不再需要使用它了。无论如何，我已经尝试添加它，但它仍然不起作用！
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?
我什至试过这个：http: //lawrencenaman.com/optimisation/print-media-queries-not-working/但它仍然不起作用。这让我发疯，有什么想法吗？
UPDATE: So I noticed that when I hit Ctrl + Pto 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.
更新：所以我注意到当我点击Ctrl + P打印页面时，我看到的预览似乎使用了打印样式表中的一些样式，但似乎使用移动媒体查询呈现所有内容？我认为可能与断点存在一些冲突，有机会时会更新。
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)?
UPDATE2：我可以看到打印样式表正在底部加载，所以理论上这应该覆盖所有其他媒体查询（至少是我试图覆盖的那些）？
回答by SVSchmidt
I tried to add
我试着添加
@media print {
* {
display:none;
}
}
to one of my sites' style.css: Doesn't work.
到我的网站之一的 style.css：不起作用。
Then I added
然后我加了
<link rel="stylesheet" href="/css/print.css" media="print">
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 {}）插入到 print.css 中。Chrome 现在会解释规则，并且不会在打印预览中显示任何内容。
I'd assume the problem is using @media print. But I have no idea why chrome behaves like that.
我认为问题是使用@media 打印。但我不知道为什么 chrome 会这样。
EDIT: Other Solution via JavaScript:
编辑：通过 JavaScript 的其他解决方案：
if(/chrome/i.test(navigator.userAgent) {
document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
回答by Bilal Akhtar
You can try setting rest of the stylesheets media attribute as
您可以尝试将其余的样式表媒体属性设置为
media="screen"and print stylesheet to media="print".
media="screen"并将样式表打印到media="print".
This will prevent browser from applying rules from stylesheets marked as "screen". Worked for me
这将阻止浏览器应用标记为“屏幕”的样式表中的规则。为我工作
回答by Ben Reeves
I ran into this problem as well and found that it was because of my rendering settings in Chrome. When testing the print preview I had set my emulation media type to be "print". When I went to actually test printing, I set my media emulation to be "screen". I should have set it to be "no emulation". When it was on "screen" the print preview ignored all the print media queries and still treated the page like it was a screen. When I finally set it back to "no emulation" it started behaving as you would expect.
我也遇到了这个问题，发现是因为我在 Chrome 中的渲染设置。在测试打印预览时，我将仿真媒体类型设置为“打印”。当我去实际测试打印时，我将媒体模拟设置为“屏幕”。我应该将其设置为“无仿真”。当它在“屏幕”上时，打印预览会忽略所有打印媒体查询，并且仍将页面视为屏幕。当我最终将其设置回“无仿真”时，它开始按照您的预期运行。
回答by Ryan Knutson
A problem I had was that rel='stylesheet'wasn't set in the print css link. Adding it fixed the problem.
我遇到的一个问题rel='stylesheet'是没有在打印 css 链接中设置。添加它解决了问题。
回答by Roger Krueger
Another way to make this happen: CSS errors ahead of the print styles. Since we all seem to have the impulse to put print styles last they're more vulnerable to this. When CSS has an error it doesn't complain... it just throws away the rest of the stylesheet.
实现这一点的另一种方法：打印样式之前的 CSS 错误。由于我们似乎都有将印花款式放在最后的冲动，因此他们更容易受到这种影响。当 CSS 出现错误时，它不会抱怨……它只会丢弃样式表的其余部分。
Giving the print styles their own stylesheet--even merely a separate inline tag--can solve this as well as the media-spec'd-in-style-tag error.
给打印样式自己的样式表——甚至只是一个单独的内联标签——可以解决这个问题以及媒体规范的样式标签错误。
