chrome的@media打印不起作用

Posted 2023-02-23

【中文标题】chrome的@media打印不起作用

【英文标题】：@media print for chrome not working

【发布时间】：2016-09-23 20:42:51

【问题描述】：

好吧，就标题你们肯定认为这是重复的，但是我已经尝试了 *** 的一些结果，但没有运气。

@media print 为 Firefox 工作。当我尝试使用 Chrome 时，它​​是一团糟。

Lots 建议使用@media screen and (-webkit-min-device-pixel-ratio: 0)，我也这样做了。但 Chrome 不会读取所有选择器和属性。

例如，我有：

@media screen and (-webkit-min-device-pixel-ratio: 0) 
    a[href]:after 
        content: none !important;
    

这不会删除打印视图中的href 值。

@media print 
    a[href]:after 
        content: none !important;
    

这对 Firefox 非常有效。但是，当然，因为它是@media print，所以这对 Chrome 根本不起作用。

我什至尝试了* transition: none !important ，很多人都说它有效，但对我来说仍然无效。

当然，我也加了

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

甚至有人说“使用javascript检测是否是Chrome用户代理”，我也试过，但我已经删除了代码，所以我不能在这里发布。

很多结果都是几年前的。我认为最近的一个是 2014 年的。我想知道是不是因为 Chrome 更新了或者其他什么，这就是为什么它们以前可以工作但现在不行了。

这两个网站是最受欢迎的网站，但尝试他们写的内容仍然没有运气。

Print media queries not working?

Tips And Tricks For Print Style Sheets

谁能给我一个想法，或者有谁知道我如何让它在 Chrome 上运行？

在此先感谢（希望这不是重复的，因为我看到了很多线程，而且所有线程都几乎链接到我上面尝试过的答案）。

如果有人对我应该做什么有任何建议，请告诉我。

【问题讨论】：

请用正确的标点符号更新这篇文章，首字母大写，并写完整的句子。

【参考方案1】：

我通过简单地删除标记中的media 属性解决了Chrome 主CSS 文件中嵌入@print 样式表的问题：

<link rel="stylesheet" href="css/styles.css">

另一方面，我个人从未见过在<link> 元素中使用% static … %。你试过不使用它吗？

现在，如果您想链接单独的打印样式表，我建议不要包含 media 属性：

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

【讨论】：

不是你的反对者，但请 1) 保持文明，2) 看看这个相关的元问题及其答案：Require a comment explaining the reason for the first downvote on a question