CSS @media 打印规则不再起作用？答案

【问题标题】：CSS @media print rule does not work anymore?CSS @media 打印规则不再起作用？
【发布时间】：2021-01-19 17:46:36
【问题描述】：

以前，当我打印以“隐藏”元素时，以下代码在 Firefox 和 Google Chrome 上都可以正常工作，

<!DOCTYPE html>
<html><head><title>Test</title>
<style type="text/css">
@media print {
    .noprint { 
        display: none; 
    }
}
</style>
</head>
<body>
<span class="noprint">abc</span>
</body></html>

但现在，它不适用于两种浏览器。但是，如果我改成这样，

<!DOCTYPE html>
<html><head><title>Test</title>
<style type="text/css" media="print">
.noprint { 
    display: none; 
}
</style>
</head>
<body>
<span class="noprint">abc</span>
</body></html>

它可以在 Firefox 上运行，但不能在 Google Chrome 上运行。独立于浏览器的解决方案是什么？（还是我的代码有问题？）

【问题讨论】：

<style> 没有 rel="stylesheet" 属性。
@BoltClock'saUnicorn，对不起，那是我的错误。但即使我删除了 rel="stylesheet"，\@media print 仍然无法工作。

标签： html css google-chrome firefox

【解决方案1】：

如果您使用@media print，则需要在样式中添加!important，否则页面将使用元素内联样式。

例如

@media print {
   .myelement1, .myelement2 { display: none !important; }
}

【讨论】：

对我有用，不知道为什么我不必更改它。听起来可能是 chrome 错误

【解决方案2】：

不知道谷歌浏览器有什么问题，但今天我用谷歌浏览器版本31.0.1650再次测试，< style media="print" >的解决方案效果很好。

而"@media print" 规则仍然不起作用。

【讨论】：

在 35.x.x.x 中看到类似的东西，但是现在任何一个选项都破坏了一些东西。寻找其他解决方法。

【解决方案3】：

"@media print" 和 < style media="print" > 在 Chrome 39.0.2171.95（64 位）Mac-OS 和 Firefox 34.0.5 Mac-OS 上都能正常工作

【讨论】：

【解决方案4】：

在我看来，您的非打印表单中有一个样式规则层叠在您的打印表单规则之上。您正在使用一种“内部”或嵌入式样式（不是内联或外部）的形式，它在级联顺序中比外部样式具有更高的选择性，但不是内联。 HTML 中的真正内联样式或样式中具有更高选择性的屏幕样式表中可能会层叠。

另外：对于外部链接样式表，如果样式表的 media 属性值设置为除print.....除非所有其他非打印样式都在该表中匹配的@media screen{...} 规则内，并且您从链接的样式表中完全删除“media=screen”属性（默认为media=all） .这可能是您的内部打印样式示例中发生的情况，因为浏览器可能会假定您的其他样式同时用于屏幕和打印（全部）。

目前许多浏览器不支持这种类型的混合媒体查询规则，因为它们不知道您的工作表和样式组合是为什么设备设计的，并且在没有特定媒体属性的情况下混合这样的样式只会使解析器感到困惑。如果外部链接的父样式表说它设置为“屏幕”，则假定其中的所有样式都用于屏幕，反之亦然。因此，它不允许在内部定义任何打印样式。就定义媒体类型而言，在元素上使用内联样式甚至更糟糕，因为它们默认适用于所有媒体类型。

旧版浏览器曾经支持多种类似这样的组合媒体设置，但现在的共识是使用外部链接表进行打印，因为它与 2001 年之前的旧版浏览器兼容。

在 CSS 中打印的最佳实践

打印样式的最佳方法是将它们放置在专门为屏幕和打印设置的链接表中，如下所示...

<link media="screen" rel="stylesheet" type="text/css" href="..." />
<link media="print" rel="stylesheet" type="text/css" href="..." />

在该打印表中，您不再需要 @media print 查询，因为样式表中带有“media=print”的所有内容都只会被打印机看到。但如果你这样做，它也应该可以正常工作。这只是多余的。

还有另一个选项使用@import 'print.css' print; 格式。但我不建议这样做，因为大量浏览器不支持@import 中的媒体类型，包括 Internet Explorer 1-7 和许多其他会忽略此规则而不导入工作表的浏览器。

您在任何这些规则中都不需要!important，除非您在常规样式表中使用了!important。这些样式也将覆盖打印表值。要层叠这些选择器，您需要在打印表中对该选择器或类进行更具选择性的副本，并将 !important 值设置为与屏幕表样式类中的属性匹配的属性。

这是另一个在样式表中不使用!important 的原因，除非绝对必要。

【讨论】：

【解决方案5】：

"@media print" &

【讨论】：