Print media queries being ignored in Chrome?
我正在使用以下方法创建一些特定于打印的样式:
1 2 3 | @media print { /* Styles */ } |
在使用SASS时,所有样式都会在运行时编译为一个样式表,即
1 | <link rel='stylesheet' href='/assets/css/styles.css'> |
现在,当我从chrome(Ctrl P)打印时,它会完全忽略我的打印样式,但Firefox(30.0)可以。 IE(11)很糟糕,但这是因为我们有很多IE似乎不喜欢的显示/隐藏面板/
我一生无法理解正在发生的事情。如果我在Chrome中模拟打印介质,则可以很好地加载样式,这是我实际尝试打印时无法使用的样式。我已经尝试了很多事情,添加了
注意,我们不再使用
我什至尝试过此方法:http://lawrencenaman.com/optimisation/print-media-queries-not-working/,但仍然无法使用。这让我发疯了,有什么主意吗?
更新:所以我注意到,当我按
UPDATE2:我可以看到打印样式表正在底部加载,因此从理论上讲,这应该覆盖所有其他媒体查询(至少是我尝试覆盖的媒体查询)?
我尝试添加
1 2 3 4 5 | @media print { * { display:none; } } |
转到我网站的一个style.css:不起作用。
然后我添加了
1 | <link rel="stylesheet" href="/css/print.css" media="print"> |
在其他样式表之后插入头部,并将与上述相同的规则(不带@media print {})插入print.css。 Chrome现在会解释该规则,并且不会在打印预览中显示任何内容。
我认为问题出在使用@media打印。但是我不知道为什么chrome会那样表现。
编辑:
通过JavaScript的其他解决方案:
1 2 3 | if(/chrome/i.test(navigator.userAgent) { document.write('<link rel="stylesheet" href="printChrome.css" media="print">'); } |
您可以尝试将其余样式表媒体属性设置为
这将阻止浏览器应用标记为"屏幕"的样式表中的规则。
为我工作
我也遇到了这个问题,发现这是因为我在Chrome中进行了渲染设置。测试打印预览时,我已将仿真媒体类型设置为"打印"。当我去实际测试打印时,我将媒体仿真设置为"屏幕"。我应该将其设置为"不模拟"。当它在"屏幕"上时,打印预览会忽略所有打印介质查询,并且仍然像对待屏幕一样对待页面。当我最终将其设置回" no emulation"时,它开始表现出您所期望的行为。
我遇到的一个问题是在打印css链接中未设置
另一种实现此目的的方法:打印样式之前的CSS错误。由于我们所有人似乎都有将打印样式放在最后的冲动,因此他们更容易受到此影响。当CSS出现错误时,它不会抱怨...它只会丢弃其余的样式表。
赋予打印样式自己的样式表-甚至仅仅是一个单独的行内标签-都可以解决此问题,也可以解决媒体规格的"样式样式标签"错误。