Question

<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的打印/打印预览中，第2页css top无法正常工作。 “两个”和“三个”都被覆盖了。请帮我正确对齐。 enter image description here

Answer 1

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

最简单的修复/黑客方法是在第一页之后的任何页面上添加一个margin-top：1px。

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

（如果你想深入了解Firefox如何进行渲染尝试设置负边距：-80px仍然会有渲染错误。但是如果你突然达到-85px，那么bug就会消失。表明该bug与Firefox试图在页面之间的阴沟周围呈现的方式有关。）

Answer 2

我整天都在和这个bug争吵，直到我发现这个问题，很多！这指向了正确的方向。来自purgatory101的修复对我来说不起作用，但至少我可以看到，FF无法打印绝对位置的任何东西。我们将它改为亲戚，现在似乎有效。还有一个错误，当它从打印机出来时，会向右移动一点（预览没问题，论文没有），但这对我来说是一个巨大的成功。

所以我的解决方案：将你需要定位的所有内容放到具有绝对定位的div包装器中，在内部你可以将相对div设置为与之前使用的相同坐标。

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

更新：我意识到IE遇到了类似的bugg - 所有绝对定位的元素都会从第2页开始松散css样式（例如z-index或opacity），但至少它们保持正确坐标。在我看来，现在做正确的事情就好了。

Firefox打印顶部对齐在第2页不好

2 个答案: