Menu
Previously, the following code works fine for both Firefox and Google Chrome when I print to "hide" the element,
<!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>
But now, it does not work for both browsers. However, if I change to this,
<!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>
It will work on Firefox, but not on Google Chrome. What is the solution which works as browser independent? (Or is there something wrong with my code?)
274
If you are using @media print, you need to add !important in your styles, or the page will use the elements inline styles.
E.g.
@media print {
.myelement1, .myelement2 { display: none !important; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
