@media Print 样式对精确输出的限制答案

【问题标题】：The limitations of @media Print styling for precision output@media Print 样式对精确输出的限制
【发布时间】：2014-03-24 14:32:46
【问题描述】：

我们正在尝试使用@media print.css 样式表来使网页能够打印一组 Avery 标签（一张纸上的 6 个标签 - 4" x 3"）。一般来说，打印媒体样式表似乎是让页面看起来像屏幕上的列表的完美解决方案，但是当您打印列表时，您会得到 Avery 徽章的印记！

挑战在于细节。除了每个浏览器似乎对打印样式都有独特的解释之外，有些规则根本不起作用。我已经看过并研究了大部分关于使用 print.css 的基本信息。用黑色覆盖字体颜色并设置打印或不打印细节相当容易，但此任务需要的是在@page 细节中精确的元素放置和样式。

该网站已经包含 Bootstrap 和其他链接的 .css 页面，尽管我已取消它们的链接以测试这些页面，并试图隔离任何可能干扰打印样式的内容。

float 似乎在 IE 中不起作用。我们要打印的列表页内容在 Chrome 中的浮动 div 中布局，但字体样式和其他 div 未按预期呈现。 Firefox 没有显示任何必需的打印内容，但显示页码似乎与 Chrome 一致，即有 56 页标签，（抱歉，如果您看不到它们？）我希望这个文档可以用作存储库了解媒体@print 的技巧和限制。

【问题讨论】：

到目前为止，我所能找到的只是设置打印样式表的“基础知识”。我会考虑更多常识设计而不是技术限制。例如，设置 nav details 为 display: none;以及所有要着色的文本：#000。我自己发现浮点数不能很好地工作（尤其是在 FF 中），并且诸如 Margin 和字体访问之类的东西“充其量是不确定的”。我什至看到在徽章之后或之前设置分页符的地方没有按预期工作。似乎@print 只是为了外观？
您是否使用重置来删除所有导致差异的浏览器默认样式？这是一个非常标准的：meyerweb.com/eric/tools/css/reset
How to get cross browser compatibility in Print on page from all browsers?的可能重复

标签： css html printing

【解决方案1】：

我遇到了同样的问题。我需要以精确的尺寸打印到特定的 Avery 标签上，虽然我可以让它与 Chrome 一起使用（尽管它忽略了一些 Print CSS 样式）——但它在 Firefox 中不起作用。 Safari 似乎也在它自己的世界里。

我认为我要解决此问题的唯一方法是生成用户必须下载和打印的 PDF（或从浏览器打印 PDF）。

糟透了，但还没有找到“CSS 打印浏览器重置”的任何解决方案。

【讨论】：

谢谢你，泰勒，至少我不是唯一对此感到困惑的人。上面的链接有一些有用的指南，但可能不是很彻底。我想由我们来记录关于浏览器做什么和什么时候做的细节差异。另一个“我没有时间做但真的希望我做的工作”，是的，如果我能找到它或做到它，我会分享它。如果可以避免该步骤，我也不喜欢保存为 .pdf 并打印出来。