0

这是问题的描述：对于初学者，我在screen页面顶部的网页版本（媒体）上显示了一个背景徽标图像，跨越了页面的整个宽度（基本上是一个标头）。

然后我添加了一个打印样式表，并一直隐藏和显示某些部分，以优化用户及其打印机的体验。

但是，问题出在这里，我注意到在 IE 上，在打印预览的每一页中，当页面内容足以容纳总数中的一页以上时，徽标图像被添加到打印输出的每一页的顶部页数。因此，如果 3 页的内容足够，那么在所有这三页中，徽标图像都会出现在打印输出的每一页的顶部，而它应该只出现在第一页中。

我检查了我的 CSS，但找不到发生了什么。我没有包含定义背景图像的 CSS 类重复多次的部分。这只发生在 IE 上。不在 Chrome 和 Firefox 上。

这是 HTML 的摘录：

    ....
    <body>
        <div class="repeating-bg-img">
            <div class="container">
            ...
            <!-- /.inner content that is long enough for more than one page -->

            ...
            </div><!-- /.container -->
        </div><!-- /.repeating-bg-img -->
    </body>
</html>

print.css这是带有 media =的样式表中 CSS 的摘录print：

.repeating-bg-img {
    background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}

有没有人在 IE 上遇到过这种情况？如果是这样，你有解决这个问题的方法吗？

4

1 回答 1

1

我今天遇到了同样的问题。一种解决方案是这样的结构：

<body>
  <div id="background" style="position: relative;">
  <img src="bkgnd.png" style="position: absolute; z-index: -1;">
    <div class="container" ...>
    ...
    </div>
  </div>
</body>

基本思想是将图像从流中取出，但相对于其包含的 <div> 定位它。z-index 将其推到其他元素后面。所以这可以用作任何类型的列标题。

这样做的一个好处是，即使在打印对话框中没有设置“背景图像”选项，也会打印背景图像。不过，我也希望看到一个适当的解决方案。

编辑 2013/07/23：

看起来 CSS3 属性将是box-decoration-break. 这对旧版本的 IE 没有帮助，但规范可在此处获得：http ://www.w3.org/TR/css3-background/#box-decoration-break

如果您真正想要的是标头，我也认为这可能有效：

@media print {
  div#background { background: none; }
  @page  :first  { background: url('bkgnd.png') center no-repeat;
                 margin: ...; }
}

但它看起来也是 CSS3。Chrome 从服务器加载图像，但只支持 'margin' 属性；Firefox 和 IE9 似乎忽略了这一切。

于 2013-07-23T00:59:02.433 回答