绝对定位在 FF 上的打印问题答案

【问题标题】：Issue in print on FF with absolute positioning绝对定位在 FF 上的打印问题
【发布时间】：2012-01-13 22:49:58
【问题描述】：

我在打印在 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>

【问题讨论】：

我们不能做任何事情，比如在后端（服务器端）操作 html 文件并提供 PDF 作为输出。我尝试了这个，但在为position:absolute创建多个 PDF 页面时面临挑战
为“打印”创建样式并将所有 div 位置设置为相对

标签： html firefox printing css css-position

【解决方案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;

然后它应该可以工作了。

【讨论】：

我的页面没有任何overflow : hidden;，以防我也有类似的东西，我不介意页面的那部分不会在打印输出时显示，但应该打印其他内容....

【解决方案2】：

如果可能，设置div 元素的高度。这至少会强制对两个页面的可见性。但是，它不处理重叠的divs，并且仍然可能存在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>

【讨论】：

我只在FF中使用“打印预览”；我的电脑上没有连接打印机。 PP 显示一些文本消失了。 . .不知道为什么。
打印预览中也没有完整的文本

【解决方案3】：

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

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

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

【讨论】：

相对定位也有问题......我也试过了，......只要我在元素上提供left和top，我就会遇到打印问题
链接在绝对定位的情况下没有帮助......：S

【解决方案4】：

将您的位置：绝对更改为位置：相对。您只能在您的打印样式表中使用：@-moz-document url-prefix() {div{position:relative} }

【讨论】：

它仍然会给出问题 top 和 left 设置将重组页面......一旦我们在页面上设置了 top 和 left ，它就不会正确打印，只会给出 1 页
虽然我确信它不会起作用，但我还是试了一下，它没有起作用
好的。伙计，这就像大海捞针，没有代码，但试试这个：@media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
提供的解决方案没有帮助..我已经编辑了问题并提供了示例代码...
我的坏人。好的，添加 id 以便它们在特定的 @-moz-document url-prefix() {div#,div#b,div#c,div#d{position:relative} } 中覆盖我在 firefox 中挖掘：jar :file:///C:/Program Files %28x86%29/Mozilla Firefox/omni.jar!/chrome/toolkit/res/

【解决方案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>

【讨论】：

【解决方案6】：

对我有用的是为绝对元素容器添加一个非零的上边距，正如 David Earl 在这里写道 https://bugzilla.mozilla.org/show_bug.cgi?id=267029

【讨论】：