以下代码应使每个 div 打印为单独的页面。每个 div 都设置为 100% 的 width 和 height。此 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>
最佳答案
解决方案
您应该考虑使用 page-break-after .您可以为每个 div 强制分页在您的示例中只需添加 page-break-after: always;给你的div造型。
兼容性
如果你检查page-break-after在 Can I Use 上网站，98.26% 的浏览器都支持它。这包括 Safari 5.x 和所有其他版本的 Safari。
您的 HTML
如果您想添加 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 文件中，或者在 <style> 之间标签。
更新的答案
因为 Safari 5.x 仍然打印五页而不是其他的三页，尝试将以下代码添加到您的 HTML:
<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>
Safari 可能会将值识别为高于 100%，从而导致一个 div打印成多页。
如果上面的代码不起作用，尝试添加height: 50px !important;到 div造型并报告结果。前任。什么颜色显示在什么页面上？
检查 Safari
让我们尝试一些自定义代码，看看这是否是 Safari 5.x 的错误。我们将创建三个 div元素，与 page-break-after属性(property)。仅此而已。
<!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>
将其粘贴到一个新的空白 HTML 文档中，然后保存并尝试打印。 Safari 是否仍要打印 5 页？如果是这样，那是 Safari 的一个错误。
如果只打印 3 页，请尝试删除 position:absolute来自 input在你的代码中。如果这不能解决问题，请慢慢地从头开始重建您的页面，看看是什么代码导致它分成 5 个页面。
更多信息
You can learn more about the
page-breakproperties by visiting W3 or CSS-Tricks.
关于html - 如何在 Safari 中将 HTML 元素打印为页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42062319/