Question

我在使用FF中的绝对定位打印表单时遇到了一些问题。我在A4纸上打印。如果它的单页面形式页面很好，但是当我必须打印多页面形式时，打印唯一的第一页，而必须在第二页上打印的其他元素将在下一页的一行中相互覆盖。它非常奇怪，同样适用于IE

注意我无法共享html，因为它包含了大量的CSS和非常复杂的HTML页面。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@-moz-document url-prefix() {div{position:relative} }
@media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>

Answer 1

有一个主题已经讨论过的主题： Firefox printing only 1st page

然而，问题可能出在css上。正如此处http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/

所述

如果你有

overflow: hidden;

在你的CSS中

，将其改为

overflow:visible;

然后它应该工作。

Answer 2

Firefox和打印绝对定位元素存在一个长期存在的问题，如Daniele B所述。

你可以重做HTML + CSS来使用相对定位吗？

在CSS中添加一些分页符（http://davidwalsh.name/css-page-breaks）。这样可以更容易设置块元素的样式，以便它们在每个“页面”中流动，并在@media打印时正确对齐。

Answer 3

改变你的立场：绝对到位置：相对。你可以使用以下方法在你的打印样式表中定位firefox：@ -moz-document url-prefix（）{div {position：relative}}

Answer 4

如果可以，请设置div元素的高度。这至少会强制将可见性强加到两页上。但是，它不处理重叠的div，并且仍然可能存在div内容的可见性问题。

以下是我的修订版（添加了一些可见性边框和着色，width可能会或可能不会有用）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    @-moz-document url-prefix() {
        div{
            position:relative;
            background-color: #dddddd;
            border: 1px solid #999999;
            width: 20%;
        } 
    }

    @media print { 
        marquee { 
            -moz-binding: none; 
        } 
        body{
            overflow:visible !important;
        }
    }
    #a{
        position:absolute;
        top:50px;
        left:70px;
        height: 1000px;
    }
    #b{
        position:absolute;
        top:1050px;
        left:170px;
        height: 600px;
    }
    #c{
        position:absolute;
        top:1550px;
        left:470px;
        height: 500px;
    }
    #d{
        position:absolute;
        top:1650px;
        left:270px;
        height: 100px;
    }

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>

Answer 5

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue; 
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red; 
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple; 
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green; 
}

</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>

Answer 6

对我有用的是，如 David Earl 在此处https://bugzilla.mozilla.org/show_bug.cgi?id=267029

所述，在绝对元素容器中添加一个非零的上边距

在具有绝对定位的FF上打印问题

6 个答案: