Chrome CSS Hack 在打印预览中不起作用答案

【问题标题】：Chrome CSS Hack Not working in Print PreviewChrome CSS Hack 在打印预览中不起作用
【发布时间】：2013-05-16 13:20:47
【问题描述】：

我仅在 Chrome 中存在对齐问题，并且在我的 print.css 中使用了以下 Chrome CSS hack： @media 屏幕和 (-webkit-min-device-pixel-ratio:0){ .invoiceTable .smallerInput{ 边距顶部：9px！重要； } }

当我去打印预览时，该样式尚未应用。如果我将 Chrome only CSS hack 添加到普通页面视图 CSS 中，我可以看到样式在 Chrome 中正确应用，并且在其他浏览器中不受影响。由于某种原因，似乎没有检测到打印预览。有谁知道如何让它在 Chrome 的打印预览中工作？

【问题讨论】：

标签： css google-chrome print-preview

【解决方案1】：

使用链接标签

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

【讨论】：

【解决方案2】：

你需要使用 @media print 以打印机为目标。

【讨论】：

是的，我的样式表设置正确：但它仍然不能用于打印预览
您的媒体查询显示“@media screen”。打印机不是屏幕。
带有 media="screen" (/stylesheets/invoice.css) 的 CSS 文件用于普通的 Web 视图。带有 media="print" (/stylesheets/invoicePrint.css) 的第二个用于打印视图，其中包含上面提到的仅 Chrome 的 CSS，并且未被应用。
我明白这一点。我是说在你的 print.css 文件中你有 '@media screen...' 这仅适用于屏幕。您需要将其更改为“@media print...”，因为您尝试定位打印机而不是屏幕。
啊，对不起，我的误解。您正在谈论实际的 Chrome hack 代码。它现在完美运行。谢谢！