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

Question

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

All*_*len 7 html css firefox google-chrome

以前,当我打印"隐藏"元素时,以下代码适用于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>

Run Code Online (Sandbox Code Playgroud)

但现在,它对两种浏览器都不起作用.但是,如果我改为这个,

<!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>

Run Code Online (Sandbox Code Playgroud)

它适用于Firefox,但不适用于Google Chrome.什么是独立于浏览器的解决方案？(或者我的代码有问题吗？)

Answer 1

Ric*_*ard 8

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

例如

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

All*_*len 3

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

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

归档时间：	12 年，3 月前
查看次数：	10950 次
最近记录：	6 年，6 月前