Question

例如，我正在尝试在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中的一个突出错误，有任何解决方法吗？谢谢。

Answer 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/

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

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

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

请查看此答案以获取详细信息https://stackoverflow.com/a/19170212/1278540

然后查看演示 http://fiddle.jshell.net/jaap/7ZGVv/2/show/

不错的IMO。

在WebKit中打印时每页上的元素

1 个答案: