chrome的@media打印不起作用

Question

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

@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 上运行？

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

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

Answer 1

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

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

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

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

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