zik*_*zik 11 html css printing google-chrome media-queries
我正在使用以下内容创建一些特定于打印的样式:
@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:我可以看到打印样式表正在底部加载所以理论上这应该写掉所有其他媒体查询(至少是我试图写的那些)？
SVS*_*idt 14
我试着补充一下
@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">');
}
| 归档时间： |
|
| 查看次数： |
20832 次 |
| 最近记录： |