css - 为什么 Safari 在每个 CSS 分页符后不断添加连续更大的边距?

标签 css printing safari webkit fixed

我试图在单个 HTML 页面中打印多个单独的 block ,并使用“page-break-after:always”在页面边界处中断。但是,打印的每一页都应用了稍大的页眉页边距。我将其归结为以下仅打印“Hello World”的测试代码,到第 145 页,它已经向下四分之一了。

<!DOCTYPE html>
<head>
<title>Printing Issue</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.break {
page-break-after:always;
}
</style>
</head>
<body>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
</body>
</html>

加载到 Safari 并使用打印命令,然后使用“预览”(以 PDF 格式打开)。在预览中显示 PDF 缩略图侧边栏并滚动到最后一页显示“Hello World”已向下移动页面。该问题在实际打印时以完全相同的方式呈现。

这只是基于 WebKit 的浏览器的问题。非常感谢任何有关在 Safari 中解决此问题的见解。

更新:这是 WebKit 中的一个错误,现在已在最新的夜间构建“r103857”中修复。感谢您的指导。

最佳答案

你应该normalize your CSS避免此类问题。

关于css - 为什么 Safari 在每个 CSS 分页符后不断添加连续更大的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8681398/

相关文章:

JQuery 动画无法正常工作

ruby-on-rails - 关于使用 CSS 设计 HTML 页面的建议?

c++ - 使用 C++ 打印 HTML 标记

执行函数后,Python 脚本返回意外的 "None"

css - 从 window.print() 中删除页眉和页脚

html - Css 显示和隐藏在除 Safari 之外的所有浏览器中工作。我怎样才能解决这个问题?

html - 如何通过CSS在右侧显示搜索图标?

javascript - document.lastModified 在 div 中使用 JQuery

javascript - 音频不随计时器启动

asp.net - Safari 9.1 更新破坏了 iframe 缓存