7

从浏览器打印页面时，它指的是print.css用media="print". 浏览器禁用了一些 CSS 规则，例如background-image和background-color，一些浏览器有启用它们的选项。

如this answer中所述，无法从页面代码中覆盖此行为。

我对此有两个问题：

  • 是否有关于这些打印规则的任何文档或良好参考？例如：
    • 哪些 CSS 规则被禁用？
    • Javascript 可以在打印之前在页面上做些什么吗？
  • 有没有办法用 Javascript 检测处于打印模式的浏览器，然后制作一个优雅的降级系统？
4

2 回答 2

4

浏览器如何打印页面有点像黑匣子。我一直无法找到任何明确的参考资料。

所有主要浏览器都有打印选项，可以将网页“缩小以适应”纸页（默认启用），以及打印背景图像和颜色（默认禁用）。大多数用户将保留这些默认设置，如果他们甚至知道这些选项存在的话。我没有看到浏览器在打印时“禁用”任何其他 CSS 规则。

Firefox 和 IE 支持onbeforeprintandonafterprint事件，因此您可以检测何时使用 JavaScript 进行打印，但显然这不是跨浏览器解决方案。

打印所需的大多数调整都可以由 CSS 处理（在单独的打印样式表中或作为@media print { ... }主样式表中的块）：

  • CSS-Discuss Wiki有一个很好的页面，介绍了您可以通过 CSS 控制多少。

  • 我建议从HTML5 Boilerplate中查看打印样式作为一个很好的起点。

  • 如果您有必须打印的背景图像，您可以<img>在页面中包含元素，用 隐藏，然后在打印 CSS 中使用（或）display: none使它们可见。display: blockinline

如果您需要大量修改页面以进行打印，我建议提供单独的仅打印版本的页面，而不是尝试使用 JavaScript 进行调整。

于 2012-06-19T05:00:04.770 回答
0

不确定第一点，但是要在打印模式下检测浏览器，您可以对 screen 执行相同的操作。要么使用 Modernizr 并有条件地为支持的功能添加类，然后制定有针对性的 CSS 规则，例如：

body.whateverfeature .yourrule { }

或者如果它只是你想测试的 IE，使用类似 h5bp 的东西：

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

于 2012-05-18T12:13:15.463 回答