以前，当我打印以“隐藏”元素时，以下代码在 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 上运行。 独立于浏览器的解决方案是什么？ (还是我的代码有问题？)
最佳答案
如果您使用@media print，您需要在样式中添加!important，否则页面将使用元素内联样式。
例如
@media print {
.myelement1, .myelement2 { display: none !important; }
}
关于html - CSS @media 打印规则不再起作用了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20172681/