Question

以前，当我打印“隐藏”元素时，以下代码适用于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。什么是独立于浏览器的解决方案？（或者我的代码有问题吗？）

Answer 1

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

E.g。

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

Answer 2

不确定Google Chrome有什么问题，但今天我使用Google Chrome版本31.0.1650再次测试，< style media="print" >的解决方案效果很好。

并且"@media print"规则仍无效。

Answer 3

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

另外：在外部链接样式表的情况下，如果样式表设置了 @media print 属性值，则该概念不适用于许多使用带有 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 的另一个原因。

Answer 4

"@media print"＆amp; < style media="print" >在Chrome 39.0.2171.95（64位）Mac-OS＆amp; Firefox 34.0.5 Mac-OS

Answer 5

“ @ media print”＆

CSS @media打印规则不再起作用了吗？

5 个答案: