2 
<html>
<head>
</head>
<body>
    <div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
        <div style="position: absolute;left: 204px; top: 64px;">
            <h1>One</h1>
        </div>
    </div>
    <div style="page-break-after: always"></div>
    <div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
        <div style="position: absolute;left: 204px; top: 64px;">
            <h1>Two</h1>
        </div>
            <div style="position: absolute;left: 204px; top: 164px;">
            <h1>Three</h1>
        </div>
    </div>
</body>
</html>

上面的代码在浏览器中正确显示，但在 Firefox 的打印/打印预览中，第二页 css 顶部不起作用。“二”和“三”这两个词都被覆盖了。请帮我正确对齐。 在此处输入图像描述

4

2 回答 2

0

Firefox 中有一个棘手的打印渲染错误会导致此行为。Firefox 中第二个（或更多）打印页面的上边距过高 1 像素。在我称之为“y-pos 死区”的内部，元素的 y 定位被忽略，从而导致文本“Two”和“Three”彼此重叠呈现，就好像它们都具有 css 定义 top ：0像素。

最简单的修复/破解是在第一个页面之后的任何页面上添加一个 margin-top:1px 。

如果您想更好地可视化此问题，请在绝对定位的 div 上添加边框。

（如果您想深入了解 Firefox 是如何进行渲染的，请尝试设置负边距顶部：-80px，它仍然会出现渲染错误。但是如果您突然上升到 -85px，错误就会消失。这开始表明该错误与 Firefox 尝试在页面之间的排水沟周围呈现的方式有关。）

于 2012-12-04T16:37:23.330 回答
0

我整天都在与这个错误作斗争，直到我发现这个问题，谢谢！这为我指明了正确的方向。purgatory101 的修复对我不起作用，但至少我可以看到，FF 无法打印任何具有绝对位置的东西。我们将其更改为相对，现在它似乎可以工作了。仍然有一个错误，当它从打印机出来时，它会向右移动一点（预览还可以，纸张不行），但这对我来说是一个巨大的成功。

所以我的解决方案：将您需要定位的所有内容放入具有绝对定位的 div 包装器中，并在其中放置与您之前使用的坐标相同的相对 div。

<div style="position: absolute;">
       <div style="position: relative; top: ...">
             blah
       </div>
       <div style="position: relative; top: ...">
             bleh
       </div>
</div>

更新：我意识到 IE 遭受了类似的错误 - 所有绝对定位的元素都从第二页（例如 z-index 或不透明度）松散了 css 样式，但至少它们保持在正确的坐标上。在我看来，只有 chrome 现在一切正常。

于 2014-02-18T08:27:54.650 回答