在 WebKit 中打印时每个页面上的元素答案

【问题标题】：Element on every page when printing in WebKit在 WebKit 中打印时每个页面上的元素
【发布时间】：2015-03-09 15:17:46
【问题描述】：

例如，我尝试在 WebKit 中打印时在所有页面上显示 <div> 或 <img>。

这适用于 IE/FF：

@media print {
  .logo {
    position: fixed;
    right: 0;
    top: 0;
  }
}

<div style="page-break-after:always"></div>
<div style="page-break-after:always"></div>
<img class="logo" src="http://placehold.it/100x100/" alt="" />

这似乎是 WebKit 中的一个突出错误，有什么解决方法吗？谢谢。

【问题讨论】：

它适用于我的 Chrome v39.0.2171.95 m (Windows/7)。
也在 Chrome 中测试过看起来不错 jsfiddle.net/4ed1x0x6
您必须在 html 中添加足够的内容才能使打印预览具有多个页面。在 Chrome 中，图像只会在第一页上，而 IE/FF 将在每一页上都有一个。
有趣。似乎它已经存在了很长时间并且没有明显的解决方法：code.google.com/p/chromium/issues/detail?id=303728

标签： css webkit

【解决方案1】：

这就是它应该如何处理水印......

div.watermark{
    display:none;
}

然后是@media print

div.watermark{
    display:block;
    position:fixed;
    z-index:-1;
    width:100%;
    height:100%;
}
    div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */
    div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */
    div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */

    @media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */

    div.watermark div{
        position:absolute;
        left:0;
        width:99%;
    }

我认为这篇文章解释了你想要有效地做的事情http://www.andypemberton.com/css/print-watermarks-with-css/ (archived link)

不幸的是，这仍然是 webkit 的问题。

解决方案：每次说出标准页面大小（以像素为单位）后，您必须使用 javascript 克隆图像类，并将其隐藏以显示屏幕并添加...

page-break-before: always;
page-break-inside: avoid;
display:block

详情看这个答案https://stackoverflow.com/a/19170212/1278540

看看这个demo http://fiddle.jshell.net/jaap/7ZGVv/2/show/

IMO 还不错。

【讨论】：