以下代码应导致每个div作为单独的页面打印。每个div都设置为width和height 100%。此HTML页面在除Safari 5.6.1以外的所有浏览器中打印为三页。如何在Safari中修复它？
请将以下代码复制到新文件并进行测试：
<html>
<head>
<style>
html,
body {
height: auto;
margin: 0;
padding: 0;
}
input {
border: 2px solid red;
}
</style>
</head>
<body>
<div style="background-color:red; position: relative; width:100%;height:100%;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:green; position: relative; width:100%;height:100%;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:red; position: relative; width:100%;height:100%;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
</body>
</html>
答案 0 :(得分：5)
您应该考虑使用page-break-after。您只需在div样式中添加page-break-after: always;即可为您的示例中的每个div强制分页。
如果您在Can I Use网站上查看page-break-after，则 98.26％的浏览器会支持它。这包括 Safari 5.x 以及所有其他版本的Safari。
如果您想内联添加page-break-after属性，请使用以下代码：
<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:green; position: relative; width:100%; height:100%; page-break-after: always;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
<div style="background-color:red; position: relative; width:100%; height:100%; page-break-after: always;">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 1.2%;left:1.2%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 6.4%;left:1.3%">
<input type="text" style="width:5%; height:1.2%; border:1px solid; position:absolute; top: 10.4%;left:1.3%">
</div>
如果您只想在用户打印时向page-break-after添加div，则可以使用@media print CSS 查询：
@media print {
div {
page-break-after: always;
}
}
值得注意的是，@media查询无法用于内联样式，您必须将其添加到 CSS 文件或{{1}之间}标签。
由于 Safari 5.x 仍然打印五页而不是其他三页，请尝试将以下代码添加到 HTML ：
<style> Safari可能会将该值识别为高于100％，导致一个<style>
@media print {
div {
width: auto !important; /* 100% Might be breaking your current code. */
height: auto !important; /* 100% Might be breaking your current code. */
page-break-after: always;
}
}
</style>
打印到多个页面。
如果上述代码无效，请尝试将div添加到height: 50px !important;样式中，然后向后报告结果。防爆。什么颜色出现在哪些页面上？
让我们尝试一些自定义代码，看看这是否是 Safari 5.x 的错误。我们将使用div属性创建三个div元素。没什么。
page-break-after将其粘贴到新的空白HTML文档中，然后保存并尝试打印。 Safari还想打印5页吗？如果是这样，那就是Safari的错误。
如果仅在3页上打印，请尝试从代码中的<!DOCTYPE html>
<html>
<body>
<div style="page-break-after: always;">Page 1</div>
<div style="page-break-after: always;">Page 2</div>
<div style="page-break-after: always;">Page 3</div>
</body>
</html>
</html>
中删除position:absolute。如果没有解决问题，请慢慢从头开始重新构建页面，看看是什么代码导致它分成5页。
您可以访问W3或CSS-Tricks了解有关
input媒体资源的详情。
答案 1 :(得分：0)
Safari 5.1太老了，现在无法找到一个安装，更不用说测试了。官方支持也在2013年停止。（reference）
我建议您在打印时尝试媒体查询。类似的东西：
@media print {
div {
position: relative;
width:100%;
height:100%;
}
}