Chrome CSS Hack Not working in Print Preview

Question

I have an alignment issue only in Chrome and am using the following Chrome CSS hack in my print.css: @media screen and (-webkit-min-device-pixel-ratio:0){ .invoiceTable .smallerInput{ margin-top:9px !important; } }

When I go to print preview, the style has not been applied. If I add the Chrome only CSS hack into the normal page view CSS, I can see that the styles are applied correctly in Chrome and not affected in other browsers. Seems like it isn't detected for the print preview for some reason. Does anyone know how to get it to work on the print preview for Chrome?

Answer 1

You need to use @media print to target a printer.

Answer 2

Use link tag

<link rel="stylesheet" href="my-sample-print-style.css" media="print"/>