css - 用于打印的动态 CSS 类

Question

用例:点击一个链接会打开一个叠加层，其中包含一些内容。页面上有很多这样的链接，每个链接都有相应的内容加载到叠加层中。用户应该只能打印特定内容。

方法:单击链接时，我正在为正文设置一个名为“打印机”的类。在 print.css 中，我隐藏了所有页面内容，除了我在叠加层中看到的内容。在关闭叠加层时，我将从正文中删除该类。

问题:一切似乎在 FF 和 IE 上运行良好。在 Chrome 上，打印对话框挂起，而在 Safari 上，我看到一个空白页面。

任何帮助，以了解我可能做错了什么，或者如果存在任何其他方法，我们将不胜感激。

Answer 1

您可以使用媒体类型来应用仅用于打印的样式表。

<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>

或在您当前的样式表中使用@import

@media print {
  /* style sheet for print goes here */
}

有关这方面的更多信息，请查看 w3.org http://www.w3.org/TR/CSS2/media.html

对于技术性较低但不太可靠的来源，http://www.w3schools.com/css/css_mediatypes.asp