Chrome窗口打印()缺少页面元素

Question

我目前在使用Chrome(47.0.2526.111, OS X) 的时候，通过一个onclick=window.print()事件来打印页面时，遇到了一些问题。预览和打印整个页面时，某些元素没有渲染出来，如某些段落块和偶尔的一些图片。

这个问题在其他浏览器中没有复制，并且很奇怪的是只有当我添加了打印按钮后才出现了这个行为，而且当使用Ctrl+P或Chrome打印样式表媒体仿真时，这种行为是不可观察的。

这个问题似乎非常难以捉摸，如果我已经通过Ctrl+P渲染了打印视图，我就可以回去并成功地使用打印按钮，所有元素都会被渲染出来。

- bravogolf

---

你是否使用带有 media="print" 的单独 CSS 文件？ - Peyman Mohamadpour

是的，我正在使用单独的打印样式表。 - bravogolf

仍然经历着这个问题，就像上面提到的那样，我确实使用了单独的打印媒体样式表。在使用Ctrl + P时无法复制问题，而在使用Safari、Firefox甚至IE11时都没有问题。 - bravogolf

@Trix，如上所述，它并不会。 - bravogolf

Answer 1

为 media="print" 使用单独的print.css 文件：

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

在您的媒体查询中：

@media print{
    div.print{
      width: 100%;
    }
}

- Peyman Mohamadpour