Fatal编程技术网
  • css/
  • 为什么Safari在每次CSS分页符后都会连续增加更大的边距？

为什么Safari在每次CSS分页符后都会连续增加更大的边距？

css printing safari

为什么Safari在每次CSS分页符后都会连续增加更大的边距？,css,printing,safari,webkit,fixed,Css,Printing,Safari,Webkit,Fixed,我试图在一个HTML页面中打印多个单独的块，并在页面边界处使用“page break after:always”进行打断。但是，打印的每一页都应用了稍大的页眉边距。下面的测试代码只打印了“Hello World”，到了第145页，已经是页面的四分之一了 <!DOCTYPE html> <head> <title>Printing Issue</title> <meta http-equiv="Content-Type" content="te

我试图在一个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并使用print命令，然后“预览”（以PDF格式打开）。在预览中显示PDF缩略图侧栏并滚动到最后一页，显示“Hello World”已向下移动页面。这一问题在实际印刷时呈现的方式完全相同

这只是基于WebKit的浏览器的一个问题。非常感谢您对Safari中解决此问题的任何见解

更新：这是WebKit中的一个bug，现在已在最新的夜间版本“r103857”中修复。谢谢您的指导。

您应该避免此类问题。

我会在webkit中将此报告为错误。请尝试使用CSS重置。或者在谷歌上浏览，寻找一个更适合你的问题的重置。这对我来说根本不会发生。Safari 5.1.2.@Kris Hollenbeck:CSS如何重置帮助？@BoltClock确保CSS在所有浏览器中呈现相同的效果会有所帮助。乔希·史密斯也提出了同样的建议。