为什么每次 CSS 分页符后 Safari 会不断添加更大的边距？答案

【问题标题】：Why does Safari keep adding a successively larger margin after each CSS page break?为什么每次 CSS 分页符后 Safari 会不断添加更大的边距？
【发布时间】：2011-12-30 16:05:18
【问题描述】：

我正在尝试在单个 HTML 页面中打印多个单独的块，并使用“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”中得到修复。感谢您的指导。

【问题讨论】：

我会将此报告为 webkit 中的错误。
尝试使用 CSS 重置。或浏览 Google 以查找更具体针对您的问题的重置。
这不会发生在我身上。 Safari 5.1.2.
@Kris Hollenbeck：CSS 重置有什么帮助？
@BoltClock 这将有助于确保 CSS 在所有浏览器中呈现相同。乔什·史密斯的建议是一样的。

标签： css printing safari webkit fixed

【解决方案1】：

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

【讨论】：