gpt4 book ai didi

html - Firefox 打印顶部对齐方式在第二页中效果不佳

转载 作者:行者123 更新时间:2023-11-28 03:37:01 26 4
gpt4 key购买 nike

<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 top 不工作。 “二”字和“三”字都被覆盖了。请帮我正确对齐它。 enter image description here

最佳答案

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

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

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

(如果您想深入了解 Firefox 是如何进行渲染的,请尝试设置一个负的 margin-top:-80px,这仍然会有渲染错误。但是如果您突然提高到 -85px,错误就会消失。这开始了以表明该错误与 Firefox 尝试在页面之间的间距周围呈现的方式有关。)

关于html - Firefox 打印顶部对齐方式在第二页中效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13605179/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com