Question

好吧，只是标题所有人都必须认为这是重复的，但我已经尝试了StackOverflow的一些结果，没有运气。

@media print适用于Firefox。当我尝试使用Chrome时，它很乱。

很多人建议使用@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" %}">

有些人甚至说＆＃34;使用JavaScript来检测它是否是Chrome用户代理＆＃34;，我也尝试过，但我已经删除了代码，所以我不能把它贴在这里。

很多结果来自多年前。我认为最近的一次是从2014年开始。我想知道是不是因为Chrome更新了什么，这就是他们过去工作的原因，但现在已经不行了。

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

任何人都可以给我一个想法，或者有人知道如何让它在Chrome上运行吗？

提前致谢（希望这不是重复的，因为我看到了很多主题，并且所有主题都与我上面尝试的答案相关联。）

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

Answer 1

我在Chrome中的主要CSS文件中解决了嵌入式media样式表的问题，只需删除标记中的<link rel="stylesheet" href="css/styles.css">属性：

% static … %

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

现在，如果您想要链接单独的打印样式表，我建议不要包含<link rel="stylesheet" href="css/print.css">属性：

awk